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

1 前言

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

2 实现效果

image

3 设计方案

视频播放video标签

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

复制代码

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

兼容性如下(来自Can I Use)：

image

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

单视频缓冲

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

- None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。

- Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据(包括尺寸，第一帧，曲目列表，持续时间等等)。