Video自动播放兼容PC端，移动端，最佳方案（IOS、安卓、微信端）

需求：

需要在app内嵌中添加背景动态播放，发现pc可以正常播放，放在移动端，部分浏览器会出现各种问题（抓狂ing）；

_______________________________________________________________________________________________________

移动端video的局限：

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

_______________________________________________________________________________________________________

查看大厂大牛的方案:

滴滴的方案是直接放弃video标签的方案，把视频换成背景图，一张张播放，达到视频显示效果

_______________________________________________________________________________________________________

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

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

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