H5视频播放器特性

微信浏览器全屏播放，官方称为（Ｈ5同层播放器）

---

1. 通过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也是一样

2. 通过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"情况下生效

事件回调

---

1. x5videoenterfullscreen进入全屏通知

myVideo.addEventListener("x5videoenterfullscreen", function(){
    alert("player enterfullscreen")
})
复制代码

2. 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)
        }
    }
复制代码

转载于:https://juejin.im/post/5cc7e8b6f265da03a00fdd5c