H5视频自动播放踩坑杂记

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

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

官方限制

1. Chrome 浏览器

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

总结几点：

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

2. Android 微信内核

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

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

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

实际问题&解

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

1.安卓微信视频不能自动播放。

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

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

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

2.IOS微信无法自动播放。

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

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

3.IOS微信有时黑屏 1-2s

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

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

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

5.诸如小米手机自带的浏览器会自动劫持 video 标签，即便是隐藏控制栏也没用。

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

6.安卓手机视频同层播放

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

Demo 体验

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

• • IOS 点击会自动放大播放

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

• • IOS 正常点击不放大

两个 Demo无法在公众号预览，强烈推荐阅读原文跳转博客主页浏览。