web视频介绍

视频化调研浅析

在web种视频加载的顺序

onloadstart （浏览器开始寻找指定资源）
ondurationchange （视频/音频 的时长发生变化时触发）
onloadedmetadata （指定视频/音频 的元数据加载后触发）
onloadeddata （当前帧的数据加载完成且还没有足够的数据播放）
onprogress （下载指定的视频/音频 时触发）
oncanplay （用户可以开始播放视频/音频 时触发）
oncanplaythrough （可以正常播放且无需停顿和缓冲时触发）

H5视频化所遇到的问题

初始化样式不统一

各家浏览器播放视频时展示的视频控件样式并不一致，所以建议隐藏默认的视频播放控件，自己开发统一。

自动播放的问题

 这是由Chrome的官方策略导致参考： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes，并且在IOS10后的safari和微信也均不能自动播放

解决办法：

• 视频静音状态自动播放

const video = document.createElement('video');
const source = document.createElement('source');
source.setAttribute('src', src);
video.textContent = '您的浏览器不支持 video 标签。';
video.appendChild(source);
video.muted = true;video.setAttribute('autoplay', true);
video.setAttribute('controls', false);
video.controls = false;

• 引导用户播放

这个可以考验产品的交互设计能力，可以参考B站的页面

• 媒体参与指数（MEI） 达到一定的值时可以自动播放

MEI是衡量个人在网站上消费媒体的倾向。

Chrome的策略可以看这个文档： 官方文档

规则大概如下:

媒体（音频/视频）的播放大于7秒
音频存在且未取消静音。
带视频的标签处于活跃状态
视频大小（以px为单位）必须大于200x140。

Chrome会计算媒体互动分数，当它足够高时，允许媒体 仅在桌面上 自动播放。（比如B站，youtube）

用户的MEI可在chrome://media-engagement/内部页面上找到。

• 同源地址第二次进入时可以自动播放，刷新页面也可以

这点建议自己试试，依赖浏览器的兼容性，不是很稳定

视频全屏播放问题

video封面问题

video层级问题