仿抖音视频全屏播放&滑动切换

有缘无缘之人

1前言随着移动技术的快速迭代，数据流量费用的快速下降，视频、直播正成为全民的媒体盛宴，我司必然也不会缺席此次盛宴，这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果，供我司直播鉴定回放视频使用。2实现效果3设计方案视频播放video标签video标签是HTML5新增的用于视频播放的标签，MDN对其介绍如下：对于HTML元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。兼容性如下（来自CanIUse）：其在移动端较好的兼容性，成为目前我们的首选方案之一单视频缓冲主要是关于video标签的preload属性：此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、autonone：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。auto：用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。但是在实际情况下，其实只预加载了一部分。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。假如不设置，默认值就是浏览器定义的了（即，不同浏览器会选择自己的默认值），即使规范建议设置为metadata。由于各个浏览器实现不同，有些浏览器是处于auto默认设置，在其处于auto设置下，如果页面内存在多个视频，会同时缓冲，造成资源浪费以及低端安卓机器的白屏和崩溃。所以，为了尽量保证当前视频的快速、流畅播放，尽量保证仅有当前视频处于资源加载中。无限加载实现简单方案：使用列表进行无限加载，和实现无限下拉列表类似，实现简单，但是在无限加载情况必然会出现页面性能问题复杂方案：参考轮播图最后一页循环加载方案，使用三个大的节点，每次动画后的下一帧进行隐式切换，示意图如下：4实现4.1模板层代码实现代码由vue进行实现，目前使用上下排列的三个主要节点构成，上下放置视频封面等信息，中间放置实际视频信息，上下节点主要用于用户滑动视频时候预览视频封面等相关信息，在移动端通过监听touch相关事件进行切换实现，其主要代码如下：      4.2自动切换动画实现js实现PKCSS实现在用户触摸结束后，如果达到切换条件，则需要切换到下一个视频，需要切换动画，动画的实现主要有requestAnimationFrame/setTimeout等传统的方法实现，也有css3新增的transition/animation过渡效果和动画实现本实例中为了低端安卓机的流畅性，故采用的css过渡transition进行实现，通过isMove判断进行动画类wrap-animation的添加，动画类实现如下：.wrap-animation {  transition: transform .6s;}是否切换视频判断由用户滑动距离&滑动速度决定，满足其一即可，主要实现是通过translateY参数在滑动开始和滑动进行中记录滑动距离，同时在滑动中实现页面拖拽跟随效果，以及使用startTime参数在滑动开始时的时间戳，滑动结束时候进行判断，如果需要进入下一个视频，则将通过isMove参数开启动画，然后通过修改translateY参数进行切换。onTouchEnd () {  if (this.isMove || this.translateY == 0) return  // 计算滑动速度  const speed = Math.abs(this.translateY / (Date.now() - this.startTime));  // 判断移动距离和滑动速度是否达到界限 如果达到界限  if (Math.abs(this.translateY) > this.maxY || speed > this.maxSpeed) {    // 开启切换动画     this.isMove = true;    this.translateY = this.translateY  {      // 关闭切换动画 切换数据      this.isMove = false      this.videoIndex = this.translateY