微信浏览器全屏播放,官方称为(H5同层播放器)
- 通过video属性
x5-video-player-type
声明启用同层H5播放器x5-video-player-type
支持的值类型:h5
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
复制代码
注:这个属性需要在播放前设置好,播放之后设置无效,下面的x5-video-player-fullscreen
也是一样
- 通过video属性
x5-video-player-fullscreen
声明启用全屏播放x5-video-player-fullscreen
支持的值类型:true
<video id="test_video" src="http://xxx.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
复制代码
x5-video-orientation 控制横竖屏
- 功能:声明播放器支持的方向
- 可选值: landscape 横屏, portraint竖屏
- 默认值:portraint
横屏
<video x5-video-player-type=”h5” x5-video-orientation="landscape"/>
复制代码
竖屏
<video x5-video-player-type="h5" x5-video-orientation="portrait"/>
复制代码
跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
复制代码
注: 此属性只在声明了x5-video-player-type="h5"情况下生效
事件回调
- x5videoenterfullscreen进入全屏通知
myVideo.addEventListener("x5videoenterfullscreen", function(){
alert("player enterfullscreen")
})
复制代码
- x5videoexitfullscreen退出全屏通知
myVideo.addEventListener("x5videoexitfullscreen", function(){
alert("player exitfullscreen")
})
复制代码
视频显示位置控制
默认视频在指定区域的居中显示,可以通过css object-position 属性控制视频(左上角) 显示位置
置顶显示:
myVideo.style["object-position"]= "0px 0px"
复制代码
底部显示:
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"]= "0px " + offsetY + "px"
复制代码
控制视频填充容器的样式 object-fit
- fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
- contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此,此参数可能会在容器内留下空白。
- cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸,宽度和高度至少有一个和容器一致。因此,此参数可能会让替换内容(如图片)部分区域不可见。
- none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
- scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
video标签常见问题实践总结
webkit-playsinline 内联播放
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 支持 | 支持 |
webkit-playsinline 内联隐藏工具条
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 不支持 | 不支持 |
全屏播放视频上浮DOM元素
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 支持 | 不支持 |
内联播放视频上浮DOM元素
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 不支持 | 不支持 |
横屏状态下全屏播上浮DOM
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 支持 | 支持 |
微信浏览器自动播放
IOS微信浏览器 | IOS Safari浏览器 | Android微信浏览器 | Android Chrome浏览器 |
---|---|---|---|
支持 | 支持 | 不支持 | 不支持 |
自动播放,只能调用X5内核WeixinJSBridgeReady API,关于这个API的详细说明,请参考微信公众平台开发者中心的接口文档。
代码如下:
if (typeof WeixinJSBridgeReady === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', function() {
video.play()
}, false)
}
}
复制代码