H5同层Video播放器接入实例分享-木庄网络博客

本文摘自PHP中文网，作者小云云，侵删。

本文主要和大家分享微信中H5同层Video播放器接入教程x5-video-player-type 启用Ｈ5同层播放器，通过video属性“x5-video-player-type”声明启用同层H5播放器，x5-video-player-type支持的值类型：h5

示例：

1	`<video src="http://xxx.mp4"` `x5-video-player-type="h5"/>`

注：这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样

x5-video-player-fullscreen全屏方式

视频播放时将会进入到全屏模式

如果不申明此属性，页面得到视口区域为原始视口大小(视频未播放前)，比如在微信里，会有一个常驻的标题栏，如果不声明此属性，这个标题栏高度不会给页面，播放时会平均分为两块（上下黑块）

注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现

1	`<video id="test_video"` `src="xxx"` `x5-video-player-type="h5"` `x5-video-player-fullscreen="true"/>`

需要监听窗口大小变化(resize)实现全屏

window.onresize = function(){
 
  test_video.style.width = window.innerWidth + "px";
 
  test_video.style.height = window.innerHeight + "px";
 
}

注: : 1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

功能：声明播放器支持的方向

可选值： landscape 横屏, portraint竖屏

默认值：portraint

e.g: http://res.imtt.qq.com/qqbrow...

横屏

1	`<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>`

竖屏

1	`<video ... x5-video-player-type="h5"` `x5-video-orientation="portrait"/>`

跟随手机自动旋转

1	`<video x5-video-player-type="h5"` `x5-video-orientation="landscape\|portrait"/>`

注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

支持版本: TBS中从>=036900开始支持，QB中是>=7.2开始支持

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者