技术指南

X5内核,解决系统webview兼容性差、加载速度慢、功能缺陷等问题

解决一切令开发者们头疼的问题,让开发者快速而轻松地开启开发之旅

解决系统webview兼容性差、加载速度慢等问题
让开发者快速而轻松地开启开发之旅
技术指南 > H5同层播放器接入规范

H5同层播放器接入规范

x5-video-player-type 启用H5同层播放器

通过video属性“x5-video-player-type”声明启用同层H5播放器

同层页面内播放是标准的视频播放形态,在video标签中添加x5-video-player-type:h5-page属性来控制网页内部同层播放,可以在视频上方显示html元素。

示例: https://tencentx5.github.io/x5/video_page_samelayer.htm

详情可以参考: https://docs.qq.com/doc/DTUxGdWZic0RLR29B

x5-video-player-fullscreen全屏方式

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

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

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

<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的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况

x5-video-orientation 控制横竖屏

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

可选值: landscape 横屏, portraint竖屏

默认值:portraint

e.g: http://res.imtt.qq.com/qqbrowser/js/test_video_orientation_attr.html

横屏

<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进入全屏通知

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

x5videoenterfullscreen: 表示播放器进入全屏状态

示例:

<video id=“myVideo".../>

通过JS监听事件

myVideo.addEventListener("x5videoenterfullscreen", function(){

  alert("player enterfullscreen");

})

x5videoexitfullscreen退出全屏通知

x5videoexitfullscreen: 表示播放器退出了全屏状态

使用方法与x5videoenterfullscreen类似