How do I enable the immersive mode for the HTML5 player

Introduction of the immersive mode

ApsaraVideo Player V2.0.1 supports video playback in the immersive mode by the HTML5 player in Android-based WeChat. This feature only works for Android-based Tencent X5 browsers, such as WeChat.

When the immersive mode is disabled, Android-based WeChat plays a video in full-screen mode automatically and the Dom element is overwritten.

Attributes for the immersive mode

Inline playback in the immersive mode

Set x5_type to h5 to enable the immersive mode.

Set x5_video_position to determine the video position in the screen. The value top indicates that the video is played in the top of the screen. The value center indicates that the video is played in the center of the screen. The default value is center.

You can see a demo in HTML5 demo.

Full-screen playback in the immersive mode

Set x5_type to h5 to enable the immersive mode. Set x5_fullscreen to true to enable full-screen playback. You do not need to set x5_video_position for a full-screen player.

By default, the video is played in tiled mode for full-screen playback. You can set object-fit to contain or other values to change the tiled mode.

video {
    object-fit: contain ! important;
    }

You can see a demo in HTML5 live demo.

Layout for entering and exiting the immersive mode

You can add some layout adjustment logic in events for entering and exiting the immersive mode. In most cases, you need to adjust the layout when entering the immersive mode, for example, the full-screen mode and element locations.

Event for entering the immersive mode: x5requestFullScreen

Event for exiting the immersive mode: x5cancelFullScreen

Suggestions for the immersive mode

The following are some suggestions for the immersive mode:

• Register a listener for resize. This allows the player to automatically adjust the window size during playback.

• Ensure that the interactive box, prompt box, and subtitles are in the video area during playback.

• It is best not to place any interactive elements in the top of the screen for live streaming videos played in full-screen mode.

• You can set the size of the video area to the window size for full-screen interaction.

Other customization

In addition to setting x_video_position to top or center, you can also set object-fit and object-position to determine the video position more flexibly.

object-fit

The CSS attribute object-fit specifies that how does a replaceable element adjust to a box with specified height and width.

• The following are optional values:

object-fit: fill;

object-fit: contain;

object-fit: cover;

object-fit: none;

object-fit: scale-down;

• The following figure shows corresponding effects of values:

• The CSS code is as follows:

video {
    object-fit: contain ! important;
    }

The object-position attribute

The CSS attribute object-position sets the position of a replaceable element. This is similar to background-position.

The following is the sample code:

CSS code:

img {
   width: 300px;
   height: 250px;
   border: 1px solid black;
   background-color: silver;
   margin-right: 1em;
   object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

The following figure shows corresponding effects of values:

Adjust the height of the player container

After changing the video position, the control bar may be not in the bottom of the video. You can call resize and requestFullScreen to adjust the height of the player container.

var setLayout = function()
{    
    //Sets the height of the player container.
    var height ; //Sets the height according to the actual condition.
    player.el().style.height = height;
}

window.onresize = function(){
    setLayout();
}

player.on("requestFullScreen", function(){
    setLayout();
});