H5视频自动播放踩坑杂记

最近的一次业务需求中，偶然接到了这么一个需求：“用户首屏可以自动播放一段视频，希望点击再全屏”。

~~具体的踩坑记录，这里就不做过多的叙述了，大家可以自行脑补，重点是问题&解决方案。~~

官方限制

1. Chrome 浏览器

介绍详见：chrome 浏览器视频播放限制

总结几点：

• 静音播放始终允许
• 带声音自动播放不允许（MEI阈值达到可突破限制）
  • chrome 66 PR 禁止自动播放有声音的媒体 （：看评论，被喷的很厉害

2. Android 微信内核

官方通告地址：Android 微信内网页音频自动播放能力调整

Preview

3. IOS 点击播放会自动全屏

沉浸式体验貌似是苹果特意设计的，详见：Apple Design

实际问题&解

大前提：所有的自动播放，视频必须静音，也就是 muted 为 true。

这个基本无解，但是咱们可以补偿播放。

window.addEventListener('touchstart', () => {
  video.play();
});

简单原理就是：监听用户的触摸屏幕事件，去做补偿播放。

IOS 虽然没有微信安卓的限制，但是播放还是稍微需要点技巧：

document.addEventListener("WeixinJSBridgeReady", function () {
  video.play();
} , false);
 

• 添加封面图
• 添加 touchstart 事件补偿播放

• 设置 playsinline & webkit-playsinline 为 true
• IOS10 以前的设备需要引入 iphone-inline 作兼容兜底。（如果目标用户设备较少可酌情去除）

目的是为了去注入广告....( (: 暂无解决办法，还在寻找中 ）

• x5-video-player-type="h5"
• x5-playsinline

Demo 体验

1. 自动静音播放（适用于 非（微信）的任何客户端）

• IOS 点击会自动放大播放

2. 全平台自动播放，安卓微信补偿触摸播放

• IOS 正常点击不放大