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) {