微信浏览器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播放,解决安卓兼容性问题