H5 player with access specification layer

x5-video-player-type layer is enabled with H5 player

Enable the same layer H5 player via video attribute "x5-video-player-type" statement

Page displays the same layer, is a standard form of video playback, adding x5-video-player-type tag in the video: h5-page attribute to control inner layer web with playback, may be displayed above the video html elements.

Example: https://tencentx5.github.io/x5/video_page_samelayer.htm

For more information please refer to: https://docs.qq.com/doc/DTUxGdWZic0RLR29B

x5-video-player-fullscreen full screen

Video playback will enter into full-screen mode

If you do not declare this property page to get the viewport area to the original size of the viewport (before the video is not playing), such as micro-channel, there will be a resident of the title bar, if you do not declare this property, this will not give the title bar height page, evenly divided into two (upper and lower dark block) during playback

Note: This property is declared, it is necessary to re-adapt their pages new viewport size changes. Can be achieved by listening to resize events

We need to monitor the window size changes (resize) full screen

window.onresize = function(){

test_video.style.width = window.innerWidth + "px";

test_video.style.height = window.innerHeight + "px";

}

Note:: 1. To allow full-screen video actually covered, so that the display area can be appropriately larger than the video viewport region, so that when displayed in the amputated portion outside the viewport, the black side is not the case where four weeks

x5-video-orientation control horizontal and vertical screen

Function: Declares player supports direction

Available Values: landscape landscape, portraint portrait

Default value: portraint

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

Horizontal screen

Portrait

Follow the phone to automatically rotate

Note: This property is only declared x5-video-player-type = take effect "h5" case

Event callbacks

x5videoenterfullscreen enter full-screen notice

Support version: TBS = 036,900 in support from the start>, QB is> = 7.2 started to support

x5videoenterfullscreen: the player is to enter full screen mode

Example:

By JS monitor events

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

alert("player enterfullscreen");

})

x5videoexitfullscreen exit full-screen notice

x5videoexitfullscreen: the player is out of the full screen mode

Using similar methods and x5videoenterfullscreen

Some recommend the use of the same layer of the player

1. listening resize event adaptive viewport size changes, adjust the viewport size video playback

2. interaction during video playback, playing box, video captions in the video area, not outside in the video area

3. For class live full-screen video, best not to put at the top of the most interactive elements

Interactive video recommendations to achieve

Operation allows the video region (video element) above

1. The need for full-screen interaction, video area may be set to the size of the viewport>

Player supports version with layers

TBS micro letter:

TBS kernel> = 036 849 after the start of support

UA Example:

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML,like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

TBS hands Q:

TBS kernel> = 036855

Android QQ Browser:

Browser version> = 7.1

UA Example:

UserAgent: Mozilla/5.0 (Linux; U; Android 4.4.4; zhcn; OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36

Video Display position control

In the middle area designated default video display, the video may be controlled by property css object-position (upper left) the position of the

Example: http://res.imtt.qq.com/qqbrowser/js/testx5videoplayertype.html

Sticky:

myVideo.style["object-position"]= "0px 0px"

Renderings:

The bottom of the display:

var = offsetY myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

myVideo.style["object-position"]= "0px " + offsetY + "px"

effect:

Q&A

Q: How do I install the new version tbs?

A: Use micro-channel scanning the two-dimensional code will be automatically installed after the scan, no further action.

Q: If you want to test the QQ browser, how to install the new version of the QQ browser

Q: How to test the effect, determined to enter the same level player?

A: After installing a new tbs version, if you want to test results, kill the micro-channel process, the system backwards in time more than a day, and then enter the Web for video playback, if the top bar of micro letter disappeared into an immersive player , a layer is the same into the player.

Q: How is tbs view the current version?

A：在微信聊天窗口输入//gettbs 并发送，查看弹出的Toast上显示的tbsCoreVersion 是否等于36849 ，若是则tbs版本正确。注：这是之后进行测试的基础，这个版本一定要正确

Q：接入了同层播放器，在老版本的tbs是否会出问题？

A：对老版本不会产生影响。

Q：同层播放器在iOS上会生效吗？

A：目前的同层播放器只在Android（包括微信）上生效，暂时不支持iOS

Q：同层播放器顶部”<”和“…”按钮可以去掉吗？

A：不能

Q: 在微信TBS里如何区是否支持同层播放器

A: a)在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持

UA示例:

Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36(KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8 TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI Language/zh_CN

b)在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持

UA示例：

UserAgent: Mozilla/5.0 (Linux. U. Android 4.4.4. zhcn. OPPO R7 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0 Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36