最近公司官网需要使用视频当做 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/
来源: https://www.cnblogs.com/zhaohongcheng/p/11718887.html