网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）

最近公司官网须要使用视频当作banner背景且自动播放，而且由于是官网须要作到PC端和移动端均可以适配兼容，这些问题非常头疼；

　　兵来将挡，水来土掩，进过查阅相关技术资料，现已完美兼容PC端和移动端。下面就为你们详细讲解：

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网页就能够实现自动播放了。Demo地址(码云)：https://gitee.com/tzlibai/video-demo.git

 

移动端：

　　移动对于<video>标签极度不友好，以上面PC的设置在微信客户端中没法实现自动播放，在Safari、 谷歌浏览器、QQ浏览器均有各种奇葩问题没法实现完美效果；

视频的实现的局限：

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

 

此时又当如何处理呢？

咱们可使用序列图片，经过JS脚本，来模拟视频播放效果，以上全部局限将统统能够规避。

 

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

实现原理以下：

1. 图片DOM对象预加载，放在内存中；
2. 播放开始，页面append当前图片DOM，同时移除上一帧DOM图片（若是有），保证页面中仅有一个图片序列元素；

对，很简单，没什么高超的技巧，但就是这种实现策略，对页面的开销是最小的，最终运行体验是最好的。

眼见为实，您能够狠狠地点击这里：序列图片实现视频播放效果demo

 

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

 

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

var store = { length: 47, 1: img1, 2: img2, ... 47: img47 };

var index = 1; container.innerHTML = ''; // 依次append图片对象
var step = function () { if (store[index - 1]) { container.removeChild(store[index - 1]); } container.appendChild(store[index]); // 序列增长
    index++; // 若是不超过最大限制，播放下一帧
    if (index <= 47) { // 42是按照每秒24帧计算的值
        setTimeout(step, 42); } }; step();

 

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

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

如今，技术实现已经对设计没有任何限制啦，剩下的就是产品和设计的创意，下一个爆款H5就是你了！

 

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

 

一、电脑打开premiere cc 2017，导入视频编辑好。

二、编辑好视频后，按导出快捷键Ctrl+M调出导出页面，而后格式选择JPEG格式。

三、点击输出名称选择保存路径。

四、设置好格式和保存路径后，点击底部的导出，等待图片的导出就能够了。

 

 

关于性能其余须要注意的

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

 

设计师喜欢使用很是高清的图片，实际上，没有必要，注意度，2倍尺寸，30%~40%的图片质量足够了，效果也很是好，这也是通过实践的，你们若是和设计师意见不一致，就可让她看我写的这段话。有效下降没必要要的图片尺寸，能够大大节约内存的开销，也是能够提升播放的性能和品质的。

 

因而，三管齐下：高性能技术实现策略，适当下降帧率，优化图片尺寸，一定助你H5炫酷效果流畅至极，好评如潮，boss交口称赞！

 

本文序列化图片视频方案参考连接：https://www.zhangxinxu.com/wordpress/2018/05/image-sequence-html5-video-play/

原文出处：https://www.cnblogs.com/zhaohongcheng/p/11718887.html