微信浏览器video标签自动播放和最顶层的解决方案（目前只兼容微信浏览器）

由于浏览器在移动端默认禁止视频的自动播放，所以autoplay属性不生效，如果pc端可以通过设置muted属性设置静音视频自动播放，但是移动端的安卓不支持，ios没有这个问题

1
2
3
4
5
6
7
<video
    id="video"
    x-webkit-airplay="allow"
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type="h5-page"
    ></video>

video属性

x5-video-player-type="h5-page"：针对x5内核，解决安卓同层级播放

x5-video-player-fullscreen='true'：防止横屏

playsinline="true"：针对ios,来进行内嵌播放),这个属性是ios 10中设置可以
让视频在小窗内播放，也就是不是全屏播放 ,但是需要ios开发者在webview中设置allowsInlineMediaPlayback属性来开启,微信环境可以通过jssdk设置(下面有例子)

webkit-playsinline="true"ios10及以下的设备支持小窗口播放

x5-video-orientation：声明播放器支持的方向，可选值landscape 横屏, portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式

x-webkit-airplay="allow"：这个属性应该是使此视频支持ios的AirPlay功能。使用AirPlay可以直接从使用iOS的设备上的不同位置播放视频、音乐还有照片文件，也就是说通过AirPlay功能可以实现影音文件的无线播放，当然前提是播放的终端设备也要支持相应的功能

全屏问题

ios ios加playsinline属性，之前只带webkit前缀的在ios10以后，会吊起系统自带播放器，两个属性都加上基本ios端都可以保证内敛到浏览器webview里面了。如果仍有个别版本的ios会吊起播放器，还可以引用一个库iphone-inline-video（具体用法很简单看它github，这里不介绍了，只需加js一句话，css加点），github地址加上playsinline webkit-playsinline这两个属性和这个库基本可以保证ios端没有问题了（不过亲测，只加这两个属性不引入库好像也是ok的，至今没有在ios端微信没有出现问题，如果你要兼容uc或者qq的浏览器建议带上这个库）.

android x5-video-player-type="h5"属性，腾讯x5内核系的android微信和手Q内置浏览器用的浏览器webview的内核，使用这个属性在微信中视频会有不同的表现，会呈现全屏状态，貌似播放控件剥去了，至少加了这个属性后视频上层可以有其他dom元素出现了（非腾讯白名单机制的一种处理措施）。

自动播放问题

android始终不能自动播放，不多说。需要用户触摸交互才可以播放，值得一提的是经测现在ios10后版本的safari和微信都不让视频自动播放了（顺带音频也不能自动播放了），但微信提供了一个事件WeixinJSBridgeReady，在微信嵌入webview全局的这个事件触发后，视频仍可以自动播放，这个应该是现在在ios端微信的视频自动播放的比较靠谱的方式，其他如手q或者其他浏览器，建议就引导用户出发触屏的行为操作出发比较好。

ios环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引入微信jssdk
<video
    id="video"
    x-webkit-airplay="allow"
    webkit-playsinline="true"
    playsinline="true"
    x5-video-player-type="h5-page"
    ></video>

 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

 <script>
 document.addEventListener("WeixinJSBridgeReady", function (){ 
    document.getElementById()('video').play()
}, false)
 </script>

如果是使用npm的方式，例如使用jweixin-module，则可以使用以下方法

main.js或者入口文件

1
2
3
jweixin.ready(function () {
    .....
})

在video标签的组件或页面里面

1
2
3
4
5
if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
        document.getElementById()('video').play()
    }, false);
}

安卓

安卓由于浏览器的限制，如果不是用户的action调用play()方法，会被浏览器阻止，所以目前的做法是在视频的上方做一个蒙层引导用户点击，然后再调用play()方法

隐藏播放控件

1
2
3
<div class="videobox" ontouchmove="return false;">
    <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video>
</div>

比如这个videobox在android下隐藏，只用display：none貌似还是不行的，但加个z-index:-1，设置成-1就可以达到隐藏播放器控件的目的了。

去掉video的controls中的下载按钮

1
2
3
4
5
6
7
8
9
10
11
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}

参考文章

1.视频标签 video的一些特殊属性详解

2.腾讯X5浏览器文档常见问题

3.video转canvas播放，解决安卓兼容性问题