H5 same layer video player access example sharing

This article mainly shares with you the H5 same-layer Video player access tutorial in WeChat x5-video-player-type to enable the H5 same-layer player and enable the same-layer H5 through the video attribute "x5-video-player-type" statement Player, value type supported by x5-video-player-type: h5

Example:

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

Note: This attribute needs to be set before playback. The setting is invalid after playback. The following' The same is true for x5-video-player-fullscreen'

x5-video-player-fullscreen full-screen mode

The video will enter full-screen mode during playback

If you do not declare this Attribute, the viewport area obtained by the page is the original viewport size (before the video is played). For example, in WeChat, there will be a permanent title bar. If this attribute is not declared, the height of the title bar will not be given to the page. When playing, It will be evenly divided into two pieces (upper and lower black blocks)

Note: Declaring this attribute requires the page to re-adapt to the new viewport size change. This can be achieved by listening to the resize event

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

It is necessary to monitor the window size change (resize) to achieve full screen

window.onresize = function(){

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

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

}

Note:: 1. In order to make the video truly fill the full screen, the video can be displayed appropriately The area is larger than the viewport area, so that after the part outside the viewport is cut off during display, there will be no black borders around it

x5-video-orientation Control the horizontal and vertical screens

Function: Statement Directions supported by the player

Optional values: landscape horizontal screen, portrait vertical screen

Default value: portrait

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

Horizontal screen

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

Vertical screen

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

Automatic rotation following the phone

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

Note: This attribute is only declared when x5 -Video-player-type=”h5” takes effect

Event callback

x5videoenterfullscreen enters full-screen notification

Supported version: TBS is supported starting from >=036900, QB supports

x5videoenterfullscreen starting from >=7.2: Indicates that the player enters the full-screen state

Example:

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

Listen events through JS

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

  alert("player enterfullscreen");

})

x5videoexitfullscreen Exit full-screen notification

x5videoexitfullscreen: Indicates that the player has exited the full-screen state

The usage method is similar to x5videoenterfullscreen

Some suggestions for using the same layer player

1. Listen to the resize event to implement adaptive viewport size changes. The viewport size will be adjusted during video playback.

2. Interaction during video playback, pop-up boxes, and subtitles in the video area, not outside the video area

3. For live full-screen videos, it is best not to put interactive elements at the top

Interactivity Video implementation suggestions

Allow operations on the video area (video element)

1. For those that require full-screen interaction, the video area can be set to the viewport size>

Same layer player support version

TBS WeChat:

TBS kernel>=036849 will start to 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 Mobile QQ:

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

The default video is displayed in the center of the specified area, which can be displayed through css object-position Attribute control video (upper left corner) display position

Example: http://res.imtt.qq.com/qqbrow...

Top:

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

Rendering :

##The bottom shows:

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

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

Effect:

Related recommendations:

HTML5 MiranaVideo player (code open source) _html5 tutorial skills

The above is the detailed content of H5 same layer video player access example sharing. For more information, please follow other related articles on the PHP Chinese website!