短视频滑动播放在 H5 下的实现方式

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

短视频已经无数不在了，但是主体还是使用 app 来承载的。本文讲述 H5 如何实现 app 的视频滑动体验。
无声胜有声，一图顶百辩，且看下图：

网址链接（需在微信或者手Q中浏览）

从上图可以看到，我们主要实现的功能也是本文要讲解的有：

• 上滑查看新短视频
• 下滑查看历史短视频
• 滑动距离大于一个距离才上翻，否则归位
• 滑动有速率的概念，如果速率达到一定值，距离不够，也会翻页
• 自动播放的问题
• 如何保证当前视频的播放流畅度

Let's do it ~~~~~~~~~~~~~~~~

本文文字说明可仔细看，很多采坑路上的总结。小程序下滑动视频的采坑之路下篇跟上。

HTML + CSS 页面结构

页面布局采用 ul 布局，如下：

主要样式：

.quan_vcd_list-item{
    width:100%;
    height:100vh;
    overflow:hidden;
    position:relative;
    -webkit-overflow-scrolling:touch;
}
.quan_vcd_list.trans{
    transition:transform .3s ease-out 0s,-webkit-transform .3s ease-out 0s;
}
video .video_hide{
    left:-100%;
}

每个item充满屏幕即可，增加松手时候的动画。

<video
  x5-video-can-play-with-audio="true"
  :class="feedData.hide?'video_hide':''"
  :src="feedData.playurl"
  preload="auto"
  type="video/mp4"
  width="100%"
  webkit-playsinline="true"
  playsinline="true"
  loop="loop"
></video>

video的html，其中两个三个重要点：

• video需要先要将video移出屏幕外来达到隐藏的目的，如果用display:none的话，用户点击可能会出现异常。
• 设置playsinline，让视频在当前页面播放而不是全屏。
• x5-video-can-play-with-audio=true，且先执行播放音再播放视频。如果不设置这个值，那么在微信h5页面，会出现播放播放了视频，音频自动停止的场面。

ul 是一个外层列表，宽度 100%即可。每一个视频项是一个充满屏幕的节点。本文不做重点讲述了，感兴趣可以自行尝试。

核心js代码

监听用户手势，动态设置ul的translateY，然后执行音频和视频的播放。so easy!

手势滑动

手势滑动播放视频翻页，主要有两个条件：滑动距离和滑动加速度。

初始化 Touch 主要是重置参数，记录最后的位移，存储页面的高度。绑定 touch 事件。

function Touch() {
  this.init();
}
Touch.fn = Touch.prototype;
Touch.fn.init = function(params) {
  this.lastY = this.translateY; //记录当前位移
  this.startY = 0;
  this.moveY = 0;
  this.lock = 0; //如果在回调或上升阶段不允许滑动.
  this.bodyHeight = window.innerHeight;
  this.resetLimitY();
  self.isIOS = /ip(?:hone|ad|od)/.test(navigator.userAgent.toLowerCase());
  ["touchstart", "touchmove", "touchend"].forEach(str => {
    document.addEventListener(this, this[str].bind(this));
  });
};

监听手势的滑动

这里增加了一个 lock 变量，用于当滑动翻页的时候，页面处在翻页中的状态，需要锁死滑动，否则会错乱。
lastY 是上一次滑动完之后的最终状态距离，translateY 是指滑动中的状态距离，需要实时变更 ul 的 translateY 的值

检测滑动的加速度：detectAcc

var a = Math.abs(this.moveY) / (Date.now() - this.start) >= 0.5;

滑动的距离 大于 滑动的时间差的一半，则认为是主动翻页，需要执行翻页操作。

 1/4    1 2 3 4 下一页 尾页

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载