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

抖音视频自动播放

1 前言

随着移动技术的快速迭代，数据流量费用的快速下降，视频、直播正成为全民的媒体盛宴，我司必然也不会缺席此次盛宴，这里讲述的是通过 h5 实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定回放视频使用。

2 实现效果

3 设计方案视频播放video标签 video标签是 HTML5 新增的用于视频播放的标签，MDN 对其介绍如下： 对于HTML 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。

兼容性如下（来自 Can I Use）：

其在移动端较好的兼容性，成为目前我们的首选方案之一

单视频缓冲 关于video标签的preload属性： 此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、autoNone：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少 HTTP 请求。Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。Auto：用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。 但是在实际情况下，其实只预加载了一部分。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。 假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。 由于各个浏览器实现不同，有些浏览器是处于 auto 默认设置，在其处于 auto 设置下，如果页面内存在多个视频，会同时缓冲，造成资源浪费以及低端安卓机器的白屏和崩溃。 所以，为了尽量保证当前视频的快速、流畅播放，尽量保证仅有当前视频处于资源加载中。无限加载实现 – 简单方案：使用列表进行无限加载，和实现无限下拉列表类似，实现简单，但是在无限加载情况必然会出现页面性能问题 – 复杂方案：参考轮播图最后一页循环加载方案，使用三个大的节点，每次动画后进行隐式切换，示意图如下：

4 实现4.1 模板层代码实现

代码由 vue 进行实现,目前使用上下排列的三个主要节点构成，上下放置视频封面等信息，中间放置实际视频信息，上下节点主要用于用户滑动视频时候预览视频封面等相关信息，在移动端通过监听 touch 相关事件进行切换实现，其主要代码如下：

4.2 自动切换动画实现js 实现 PK CSS 实现 在用户触摸结束后，如果达到切换条件，则需要切换到下一个视频，需要切换动画，动画的实现主要有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