最近公司官网需要使用视频当做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浏览器均有各类奇葩问题无法实现完美效果;
视频的实现的局限:
- iOS下不能自动播放,需要至少touch一次屏幕,这个有时候还挺烦人的,例如我们想做一个H5 app闪屏的时候就蛋疼了。
- 不能在中间穿插棒棒的交互效果,例如,需要视频某一帧暂停,鼠标hover或者touch的时候,当前画面有交互效果,就很不好处理。
- 播放的速率不能随心所欲控制,视频完成也就定死了。
- 如果有些信息是动态的,需要与用户信息关联,则视频方案也会面临很大的调整,因为总不可能每一个用户生成一个不一样的视频,需要辅助额外手段满足需求(例如CSS覆盖定位)。
此时又当如何处理呢?
我们可以使用序列图片,通过JS脚本,来模拟视频播放效果,以上所有局限将通通可以规避。
序列图片视频化技术高性能实现方法:
实现原理如下:
- 图片DOM对象预加载,放在内存中;
- 播放开始,页面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就是你了!
番外技能:如何把视频变成序列图片?
1、电脑打开premiere cc 2017,导入视频编辑好。
2、编辑好视频后,按导出快捷键Ctrl+M调出导出页面,然后格式选择JPEG格式。
3、点击输出名称选择保存路径。
4、设置好格式和保存路径后,点击底部的导出,等待图片的导出就可以了。
关于性能其他需要注意的
人眼的跟踪能力要比大猩猩之类要弱的,因此,实际开发,并不一定需要每秒24帧的播放速率,你每秒18帧,对于一个H5运营活动而言,用户是无感知的。每秒18帧的播放可以节约不少请求和加载数据量,性能上也能有所提高,权衡来看,是推荐的,毕竟我们不是去参加动画比赛,是一个在线的web产品。
设计师喜欢使用非常高清的图片,实际上,没有必要,注意度,2倍尺寸,30%~40%的图片质量足够了,效果也非常好,这也是经过实践的,大家如果和设计师意见不一致,就可以让她看我写的这段话。有效降低不必要的图片尺寸,可以大大节约内存的开销,也是可以提高播放的性能和品质的。
于是,三管齐下:高性能技术实现策略,适当降低帧率,优化图片尺寸,必定助你H5炫酷效果流畅至极,好评如潮,boss交口称赞!
本文序列化图片视频方案参考链接:https://www.zhangxinxu.com/wordpress/2018/05/image-sequence-html5-video-play/
如果大家有任何疑问即可留言反馈,会在第一时间回复反馈,谢谢大家!
本人使用GSAP框架搭建的个人网站也上线啦!有兴趣可以访问 zhaohongcheng.com 查看,感谢~
本人uni-app影视项目已经重磅开源,一套代码套发布到H5、APP、小程序等多个平台!有兴趣可以访问Dcloud官方插件市场https://ext.dcloud.net.cn/plugin?id=1839 查看,感谢~
本文为Tz张无忌文章,读后有收获可以请作者喝杯咖啡,转载请文章注明出处:https://www.cnblogs.com/zhaohongcheng/