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
Attribute | Type | Description | |
---|---|---|---|
x5_type | String | Enables the immersive mode. The value is h5. | |
x5_fullscreen | Boolean | Declares whether to enter the full-screen mode during video playback by Tencent Browsing Service (TBS). The default value is true. | |
x5_video_position | String | Declares the position of the video played in the screen. The default value is center. Optional values are top and center. |
|
x5_orientation | String | Declares the orientation of the video played by TBS. The following are optional values: landscape: landscape portrait: portrait landscape |
portrait: The video switches between landscape or portrait according to the orientation of the mobile phone. |
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();
});