Video自动播放兼容PC端,移动端,最佳方案(IOS、安卓、微信端)
需求:需要在app内嵌中添加背景动态播放,发现pc可以正常播放,放在移动端,部分浏览器会出现各种问题(抓狂ing);_______________________________________________________________________________________________________移动端video的局限:iOS下不能自动播放,需要至少touch一次屏幕,这个
·
需求:
需要在app内嵌中添加背景动态播放,发现pc可以正常播放,放在移动端,部分浏览器会出现各种问题(抓狂ing);
_______________________________________________________________________________________________________
移动端video的局限:
- iOS下不能自动播放,需要至少touch一次屏幕,这个有时候还挺烦人的,例如我们想做一个H5 app闪屏的时候就蛋疼了。
- 不能在中间穿插棒棒的交互效果,例如,需要视频某一帧暂停,鼠标hover或者touch的时候,当前画面有交互效果,就很不好处理。
- 播放的速率不能随心所欲控制,视频完成也就定死了。
- 如果有些信息是动态的,需要与用户信息关联,则视频方案也会面临很大的调整,因为总不可能每一个用户生成一个不一样的视频,需要辅助额外手段满足需求(例如CSS覆盖定位)。
_______________________________________________________________________________________________________
查看大厂大牛的方案:
滴滴的方案是直接放弃video标签的方案,把视频换成背景图,一张张播放,达到视频显示效果
_______________________________________________________________________________________________________
序列图片视频化技术高性能实现方法:
这里参考了「张鑫旭大佬」的方案,实现原理如下:
- 图片DOM对象预加载,放在内存中;
- 播放开始,页面append当前图片DOM,同时移除上一帧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();
更多推荐
已为社区贡献5条内容
所有评论(0)