Wechat browser full screen playback, officially called (H5 same-layer player)

  1. Through the Video attributex5-video-player-typeDeclare the same layer H5 player enabledx5-video-player-typeSupported value type: h5
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
Copy the code

Note: This property needs to be set before playing. It does not work after playing. The same is true for x5-video-player-fullscreen below

  1. Through the Video attributex5-video-player-fullscreenDeclares that full screen playback is enabledx5-video-player-fullscreenSupported value type: true
<video id="test_video" src="http://xxx.mp4" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
Copy the code

X5 – Video-orientation Controls vertical and horizontal screens

  • Function: Declare the player support direction
  • Optional value: landscape, portraint portrait
  • Default value: Portraint
landscape
<video x5-video-player-type="The h5" x5-video-orientation="landscape"/>
Copy the code
Vertical screen
<video x5-video-player-type="h5" x5-video-orientation="portrait"/>
Copy the code
Automatically rotate with the mobile phone
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
Copy the code

Note: This property only works if x5-video-player-type="h5" is declared

Event callback

  1. X5videoenterfullscreen Enters full-screen notification
myVideo.addEventListener("x5videoenterfullscreen".function(){
    alert("player enterfullscreen")})Copy the code
  1. X5videoexitfullscreen Exits full-screen notification
myVideo.addEventListener("x5videoexitfullscreen".function(){
    alert("player exitfullscreen")})Copy the code

Video display position control

By default, the video is displayed in the center of the specified area. You can control the display position of the video (upper left corner) by using the CSS Object-Position property

Top display:

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

Bottom display:

var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"] ="0px " + offsetY + "px"
Copy the code

The style Object-fit controls the video fill container

  • I’ll fill it up. The default value. The replacement content stretches to fill the entire content box, with no guarantee of retaining the original proportions.
  • My folder contains three major sections. Keep the original size ratio. Make sure the replacement content is big enough to fit inside the container. Therefore, this parameter may leave a blank space in the container.
  • Cover the ground. Keep the original size ratio. Ensure that the size of the replacement content is larger than the size of the container, and at least one of the width and height is the same as the container. Therefore, this parameter may make parts of the replacement content, such as images, invisible.
  • None: The Chinese definition of “none”. Keep the original size ratio. Keep the original size of the replacement content.
  • Scale-down: in Chinese, it means to decrease. It’s like setting None or contain one after another, and ending up with the smaller one.

Summary of common video label Questions

Webkit-playsinline playsinline
IOS wechat browser IOS Safari Android wechat browser Android Chrome
support support support support
Webkit-playsinline hides the toolbar inline
IOS wechat browser IOS Safari Android wechat browser Android Chrome
support support Does not support Does not support
Play video floating DOM elements in full screen
IOS wechat browser IOS Safari Android wechat browser Android Chrome
support support support Does not support
Inline plays video over floating DOM elements
IOS wechat browser IOS Safari Android wechat browser Android Chrome
support support Does not support Does not support
##### In landscape mode, the floating DOM is played in full screen
IOS wechat browser IOS Safari Android wechat browser Android Chrome
: – : : – : : – : : – :
support support support support
##### Wechat browser automatically plays
IOS wechat browser IOS Safari Android wechat browser Android Chrome
: – : : – : : – : : – :
support support Does not support Does not support

Only X5 kernel WeixinJSBridgeReady API can be called for automatic playback. For detailed explanation of this API, please refer to the interface document of wechat Public Platform Developer Center.

The code is as follows:

if (typeof WeixinJSBridgeReady === 'undefined') {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady'.function() {
            video.play()
            }, false)}}Copy the code