PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）

r囧r小猫 2022-10-23 01:53 543阅读 0赞

最近公司官网需要使用视频当做banner背景且自动播放，并且因为是官网需要做到PC端和移动端都可以适配自动播放兼容，这些问题很是头疼；得到这个需求后，开始查看各个大厂的移动端网站，发现很少有官网在移动端使用视频当做背景；

--------------------

正当手足无措时，无意中看到了滴滴的移动端官网，大家可以查看下图，这个我们看似是视频的背景，其实是由300多张图片组动态更换图片的src组成的；[滴滴移动端网站][Link 1](PC需要F12打开控制台 -> `Ctrl + Shift + M` 切换到移动端)  
![img][]  
这时候会有同学问：为什么不直接放一个`video`标签上去，要这么麻烦使用300多张图片区去组成一个视频呢？？？

## 移动端video的痛点 ##

其实移动对于`video标签`极度不友好，为了用户体验度避免浪费用户的流量，移动端浏览器只能让用户触发事件去播放video。如点击播放按钮或者监听document的触摸事件，在Safari、 谷歌浏览器、QQ浏览器均有各类奇葩问题无法实现完美自动播放的效果；

## 移动端video的局限： ##

*  iOS下不能自动播放，需要至少touch一次屏幕，这个有时候还挺烦人的，例如我们想做一个H5 app闪屏的时候就蛋疼了。
 *  不能在中间穿插棒棒的交互效果，例如，需要视频某一帧暂停，鼠标hover或者touch的时候，当前画面有交互效果，就很不好处理。
 *  播放的速率不能随心所欲控制，视频完成也就定死了。
 *  如果有些信息是动态的，需要与用户信息关联，则视频方案也会面临很大的调整，因为总不可能每一个用户生成一个不一样的视频，需要辅助额外手段满足需求（例如CSS覆盖定位）。

但是当我们的产品大佬提出了要求移动端video当做背景，又必须全部兼容的时候，我们应该如何处理呢？

> 回答：与产品真人PK

如果我们打不过产品。那么我们可以使用序列图片，通过JS脚本，来模拟视频播放效果，相当于上图滴滴的方案，以上所有局限将通通可以规避。

# 序列图片视频化技术高性能实现方法: #

这里参考了\*\*「张鑫旭大佬」\*\*的方案，实现原理如下：

1.  图片DOM对象预加载，放在内存中；
2.  播放开始，页面append当前图片DOM，同时移除上一帧DOM图片（如果有），保证页面中仅有一个图片序列元素； 对，很简单，没什么高超的技巧，但就是这种实现策略，对页面的开销是最小的，最终运行体验是最好的。

**「效果之流畅，体验之良好，十有八九都会认为是视频，其实不是，就是图片，不断的图片DOM增删实现的类似视频效果。」**

核心JS代码如下（完整代码见demo），假设container是容器元素，我们的图片已经预加载到store对象中，结构如下：

`container.removeChild(store[index - 1])`移除之前一帧图片DOM，`container.append(store[index])`则是插入当前一帧DOM，人的肉眼习惯连续性感知事物，因此，这种删除和添加，用户是无感知的，于是一个流程的播放效果即达成，根据实践，就算每帧图片在几百K大小主流设备也能hold住。

`眼见为实，可以狠狠地点击这里`：[序列图片实现视频播放效果demo][demo]

由于本质上播放的是DOM对象，因此，我们不仅可以播放图片DOM，还可以是有着丰富HTML结构的`<div>元素`，于是，什么样的交互实现都不在话下，比方说视频中要出现用户的姓名，怎么办，很简单啊，`<div>元素`中使用定位就可以实现了。

# 番外技能：如何把视频变成序列图片？ #

## 方案一：求助UI小姐姐，帮忙生成~ ##

使用必杀技：卖萌撒娇、端茶递水、奶茶零食等均可实现！

## 方案二：使用Premiere cc处理软件 ##

方案如下：

1.  电脑打开premiere cc 2017，导入视频编辑好:![img][img 1]
2.  编辑好视频后，按导出快捷键Ctrl+M调出导出页面，然后格式选择JPEG格式。 ![img][img 2]
3.  点击输出名称选择保存路径。 ![img][img 3]
4.  设置好格式和保存路径后，点击底部的导出，等待图片的导出就可以了。 ![img][img 4]

## 关于性能其他需要注意的 ##

人眼的跟踪能力要比大猩猩之类要弱的，因此，实际开发，并不一定需要每秒24帧的播放速率，你每秒18帧，对于一个H5运营活动而言，用户是无感知的。每秒18帧的播放可以节约不少请求和加载数据量，性能上也能有所提高，权衡来看，是推荐的，毕竟我们不是去参加动画比赛，是一个在线的web产品。

# 番外篇-PC端视频自动播放 #

PC端相应简单些，浏览器对`<video>标签`的兼容还是很好的，但是想要在浏览器中当做Banner视频自动播放就必须设置这些属性来更好地实现；大家可以查看下方的代码详细注释

<video
    // 设置后，音频会初始化为静音，注意浏览器只有设置静音，才能自动播放
     muted
     
    // 视频会马上自动开始播放，不会停下来等着数据载入结束。
    autoplay="autoplay"
    
    // 布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方
     loop="loop"
     
    // 一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。
    x5-playsinline="true"
    playsinline="true"
    webkit-playsinline="true"
    
    // 一个布尔属性，用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。
    x-webkit-airplay="allow"
    
    // 这个视频优先加载
    preload="auto"
    
    // 启用同层H5播放器，就是在视频全屏的时候，div可以呈现在视频层上，也是WeChat安卓版特有的属性。同层播放别名也叫做沉浸式播放
    x5-video-player-type="h5"
    
    // :全屏设置。它又两个属性值，ture和false，true支持全屏播放
    x5-video-player-fullscreen="true"
    
    >
    
    // <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
    <source src="indexMove.mp4" type="video/mp4">
    
    </video>

同上面方法设置后，PC网页就可以实现自动播放了！

# 结尾 #

如有疑问，可在下方留言，会第一时间进行回复

谢谢你愿意花时间阅读这篇文章，希望可以对你有所帮助！

> 只要有树叶飞舞的地方,火就会燃烧,火的影子照耀着村子,新的树叶就会发芽

[Link 1]: https://www.didiglobal.com/
[img]: /images/20221022/ff2019f77a68489fab63dfb5c1fc3e6d.png
[demo]: https://www.zhangxinxu.com/study/201805/image-sequence-frame-play.html
[img 1]: /images/20221022/cf1d4b838be1428faef1b9074fdf226d.png
[img 2]: /images/20221022/cff29e9d07d84c7488af6bf3c2fba4fe.png
[img 3]: /images/20221022/eddc1cddcda044f6ae98016058f250a5.png
[img 4]: /images/20221022/35650aeda919413cb05602787775779b.png