html5仿抖音php,H5+Jquery 仿抖音视屏切换

整体思路：

jQuery -- touch事件之滑动判断，当上划超过30px切换下一个视屏，调换中的 src。

错误思路：原本想用swiper循坏显示，视觉效果可以达到，但是会把所有的视屏都加载出来，虽然界面只显示一个视屏，但是能听到所有的音频。

HTML

CSS

*{

padding: 0;

margin: 0;

}

html,

body {

position: relative;

height: 100%;

background: #333;

}

video {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

JS

var videoList = [

"http://syimg.v5portal.com//itemvideo/1/201907082049256035_a5b986857860c5a23c0f25e55814ec07.mp4",

"https://static.yximgs.com/s1/videos/home-2.mp4",

"https://static.yximgs.com/s1/videos/www_main-059ce9beee.mp4"

];

$("body").on("touchstart", function(e) {

// 判断默认行为是否可以被禁用

if (e.cancelable) {

// 判断默认行为是否已经被禁用

if (!e.defaultPrevented) {

e.preventDefault();

}

}

startX = e.originalEvent.changedTouches[0].pageX,

startY = e.originalEvent.changedTouches[0].pageY;

});

$("body").on("touchend", function(e) {

// 判断默认行为是否可以被禁用

if (e.cancelable) {

// 判断默认行为是否已经被禁用

if (!e.defaultPrevented) {

//e.preventDefault();

}

}

moveEndX = e.originalEvent.changedTouches[0].pageX,

moveEndY = e.originalEvent.changedTouches[0].pageY,

X = moveEndX - startX,

Y = moveEndY - startY;

//左滑

//下滑 上一个

if (Y > 30) {

var index = $("#video").attr("attr-index");

if (parseInt(index) > 0) {

$("#video").attr("src", videoList[parseInt(index) - 1]);

$("#video").attr("attr-index", (parseInt(index) - 1));

}

}

//上滑 下一个

else if (Y < 30 && Y !=0) {

var index = $("#video").attr("attr-index");

if (parseInt(index) < videoList.length) {

$("#video").attr("src", videoList[parseInt(index) + 1]);

$("#video").attr("attr-index", (parseInt(index) + 1));

}

}

//单击

else {

alert('单击');

}

});

最后附上标签的参数，根据需求添加

image.png

有个坑：页面有点赞功能，发现不能触发任何click事件

微信截图_20190730162434.png

微信截图_20190730162651.png

preventDefault)()限制了页面上的任何事件，包括click事件

最终效果

效果图.png