h5实现视频自动播放

最近项目中，需要用到网页视频自动播放功能，PC端没有问题，移动端无法自动播放。针对这个场景和网上资料查阅，分析各个方案优缺点，方便其他相似需求开发人员。

video标签说明

• src: 设置显示视频路径
• controls: 显示控制栏
• loop: 控制视频循环播放
• autoplay: 自动播放
• muted: 设置静音播放
• playsinline: 不全屏播放

PC端自动播放

<video id="video"
 x5-video-player-type="h5" controls autoplay
 controlsList="nofullscreen" playsinline 
 style="width: 100%; height:300px">
      <source src="/video/test.mp4" type="video/mp4">
      <source src="/video/test.webm" type="video/webm">
      <p>Your browser doesn't support HTML5 video. Here is</p>
</video>

通过指定autoplay属性，即可实现自动播放

移动端自动播放分析

为了避免浪费流量和电池功耗损失，移动端浏览器禁止了自动播放功能，需要用户主动点击才会播放。

youtubo视频网站自动播放

针对视频访问量大网站，浏览器厂商有个白名单机制，放入白名单的域名，就能自动播放。参考链接https://blog.google/products/chrome/improving-autoplay-chrome/

设置autoplay、muted和playsinline

对video标签进行如下设置：

<video id="video" muted autoplay playsinline 
 style="width: 100%; height:300px">
      <source src="/video/test.mp4" type="video/mp4">
      <source src="/video/test.webm" type="video/webm">
      <p>Your browser doesn't support HTML5 video. Here is</p>
</video>

各个浏览器厂商表现不一样，具体如下：

平台/浏览器	自带	微信
iOS >= 10.0（关闭低功耗开关）	✅	❎
iOS < 10.0	❎	❎
Android	❎	❎
华为	❎	❎
PC	✅	✅

微信App自动播放（不点击播放器按钮）

在微信App中，h5通过集成微信sdk，并监听SDK初始化桥事件，然后开启播放器播放。设置如下：

1. 设置SDK

<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
      window.wxInited = false
      document.addEventListener('WeixinJSBridgeReady', e => {
        const video = document.getElementById('video')
        if (video) {
          video.play()
          video.pause()
        }
      }, false)
</script>    

2. 设置video标签

<video id="video" x5-video-player-type="h5"
      controls controlsList="nofullscreen"
      playsinline style="width: 100%; height:0px">
      <source src="/video/test.mp4" type="video/mp4">
      <source src="/video/test.webm" type="video/webm">
      <p>Your browser doesn't support HTML5 video. Here is</p>
</video>

通过上述设置，播放器处于可播放状态，后续非人工触发play或pause操作，都可以操作播放器。

各个浏览器厂商表现一致，具体如下：

平台/浏览器	自带	微信
iOS	❎	✅
Android	❎	❎
华为	❎	❎
PC	❎	❎

人工触发事件（不点击播放器按钮）

除了点击播放器的播放或暂停按钮，可以触发播放操作。用户主动点击(click)事件或滑动(touchstart、touchmove、touchend)事件，可以触发播放器播放操作。设置如下：

document.addEventListener('click', function () {
  const video = document.getElementById('video')
      if (video) {
        video.play()
      }
    },
{ capture: true, passive: true }
)

各个浏览器厂商表现一致，具体如下：

平台/浏览器	自带	微信
iOS	✅	✅
Android	✅	✅
华为	✅	✅
PC	✅	✅

非视频降级方案

根据上述的分析，每种方案都有些不足，并不能解决所有平台和浏览器的问题。针对静音的视频环境，可以把视频转化为图片，按照一定的周期播放图片，这样所有的平台都支持。

这里参考了「张鑫旭大佬」的方案，实现原理如下：

1. 图片DOM对象预加载，放在内存中；
2. 播放开始，页面append当前图片DOM，同时移除上一帧DOM图片（如果有），保证页面中仅有一个图片序列元素； 对，很简单，没什么高超的技巧，但就是这种实现策略，对页面的开销是最小的，最终运行体验是最好的。

<div class="page" style="background-image: url(&quot;https://website.didiglobal.com/dist/img/homepage1-app.fb9b0c10.jpg&quot;);">
	<div class="home-video-wrap">
		<div class="video-app-container">
			<img src="https://website.didiglobal.com/dist/img/合成 1_00315.68c3cb63.jpg">
		</div>
		<div class="mask-whole"></div>
	</div>
</div>

图片轮播demo，参考滴滴移动官网

视频转为图片

方案如下：

1. 电脑打开premiere cc 2017，导入视频编辑好。
2. 编辑好视频后，按导出快捷键Ctrl+M调出导出页面，然后格式选择JPEG格式。

3.点击输出名称选择保存路径。

4.设置好格式和保存路径后，点击底部的导出，等待图片的导出就可以了。

移动端自动播放兼容方案

自动播放需要满足几个条件所有移动端手机都可以自动播放：

1. 必须要有用户点击事件touch
2. 接收点击事件的标签和video标签不能是父子关系(就是body接收的点击事件调用video的play方法，播放器也是不会播放视频的
3. 接收点击时候后，立即执行play()方法，网络请求后调用play()方法可能会无效

因此，页面初始化话的时候写一个video标签，这个video标签在可见区域之外，video标签和需要点击事件控件不是父子关系，当用户点击播放按钮时，立刻调用play()方法。设置video标签的样式到可见区域内，通过z-index控制层级关系，就能实现自动播放。

根据上述方案分析，选择合适自己的使用场景，同时做好兼容，如

1. 当不支持自动播放时，通过文案提示或手势引导，提示用户点击播放

参考说明

PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）
移动端视频 video 的 Android 兼容，去除播放控件、全屏等