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

1 前言

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

2 实现效果

3 设计方案

• 视频播放video标签

`video`标签是HTML5新增的用于视频播放的标签，MDN对其介绍如下：
复制代码

对于HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

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

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

• 单视频缓冲

关于video标签的preload属性： 此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto

- None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
- Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
- Auto：用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。
复制代码

但是在实际情况下，其实只预