HTML5 video autoplay(自动播放设置，包含移动端和微信)

在html中添加video标签可以直接插处视频，使用autoplay理论上就可以自动播放了。但要做到在各浏览器中兼容，并且有一个良好的样式，则需要额外添加不少代码。根据下面的步骤可以解决大部分问题。

首先，html上添加video代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
<video id="myVideo" style="object-fit:fill"
            autoplay
            webkit-playsinline  
            playsinline 
            x5-video-player-type="h5"
            x5-video-player-fullscreen="true"
            x5-video-orientation="portraint"
            preload="auto"
            loop 
            muted 
            crossorigin="anonymous"
            src="test.mp4"> Sorry, your browser doesn\'t support embedded videos.  </video>

一些说明：

  • style="object-fit:fill" – 视频内容充满整个video容器
  • muted – 必须静音才能在现代浏览器中启用自动播放
  • webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" – 确保在Mac，iOS和安卓上能自动播放

其次，为解决在微信浏览器中能自动播放，需要添加如下JS代码：

1
2
3
4
5
6
7
document.addEventListener(
            'WeixinJSBridgeReady',
            function () {
                document.querySelector('#myVideo').play();
            },
            false
        );

html5 video autoplay