H5+Jquery 仿抖音视屏切换

整体思路：
jQuery -- touch事件之滑动判断，当上划超过30px切换下一个视屏，调换<video>中的 src。
错误思路：原本想用swiper循坏<video>显示，视觉效果可以达到，但是会把所有的视屏都加载出来，虽然界面只显示一个视屏，但是能听到所有的音频。

HTML

  <div class="videoList">
    <video id="video" width="100%" height="100%" loop="loop" autoplay="autoplay" attr-index="0" src="http://syimg.v5portal.com//itemvideo/1/201907082049256035_a5b986857860c5a23c0f25e55814ec07.mp4">
    </video>
  </div>

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

<script>
  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('单击');
    }
  });
</script>

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

image.png

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

微信截图_20190730162434.png 微信截图_20190730162651.png

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

最终效果

效果图.png