阅读 3153

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

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


正当手足无措时,无意中看到了滴滴的移动端官网,大家可以查看下图,这个我们看似是视频的背景,其实是由300多张图片组动态更换图片的src组成的;滴滴移动端网站(PC需要F12打开控制台 -> Ctrl + Shift + M 切换到移动端)

这时候会有同学问:为什么不直接放一个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对象中,结构如下:

var store = {
    length47,
    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住。

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

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

番外技能:如何把视频变成序列图片?

方案一:求助UI小姐姐,帮忙生成~

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

方案二:使用Premiere cc处理软件

方案如下:

  1. 电脑打开premiere cc 2017,导入视频编辑好。

  2. 编辑好视频后,按导出快捷键Ctrl+M调出导出页面,然后格式选择JPEG格式。

3.点击输出名称选择保存路径。

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网页就可以实现自动播放了!

结尾

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

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

我曾踏足山巅,也曾跌落谷底,两者都让我受益良多。个人网站:zhaohongcheng.com