Wechat play the biggest pit
The biggest pit is on Android phones. X5 browser will hijack the Video tag and use the player to pop up full-screen playback, which is on the top layer and covers DOM elements. Moreover, after playing, advertising videos will appear, such as:
Broadcast tree
X5 browser in order to solve the problem of overwriting DOM elements, put forward a concept of the same layer playback, popular point is that the video playback should pop up full screen, but the video can not overwrite DOM elements, can be in the same layer with the video, although this scheme is a little awkward, but finally solved the problem of overwriting DOM elements. Especially important for H5 live.
Implementation of the same layer playback
Although X5 provides some properties that can be used to set up the same layer of playback, there are a few details that need to be handled:
When X5 displays full-screen playback, you need to subscribe to resize and full-screen events, and adjust the size of the video and container
When clicking the back button at the top of wechat, the user needs to subscribe to the event of full-screen withdrawal when exiting full-screen playback, which can be handled according to the actual business situation. For example, the current page needs to be closed in some scenarios to give users an experience of exiting the current page.
Set the display position of the video, for example, the full-screen live video should be displayed in full screen, the ordinary playing video should be displayed in the upper left corner, and when the full-screen button is clicked, the video should be displayed in the center.
A lot of details need to be handled. Aliplayer supports h5 same-layer playback in X5 browser in the latest release, and a lot of details help to implement it.
Live H5LiveDemo in full screen
On-demand video
The general layout of voD is that the upper part is the video playing area and the lower part is the playlist and comment area. The playing effect on Android wechat is as follows:
Code can refer to the video ON demand H5Demo
Creating a player
Use the x5_video_position and x5_type properties to specify the display position of the video and enable H5 playback on the same layer
Processing when full screen playback is displayed
There are two main cases:
1. When the play button is clicked to start playing, the wechat hijacking video will pop up to play in full screen. At this time, Aliplayer will also trigger the full-screen event and call the cancel full-screen method here. Note: the player will implement this logic later
2. When the user clicks the full-screen button on the Controlbar, the full-screen event will also be triggered at this time, where the video can be adjusted to be displayed in the center.
The above two cases are treated a little differently
Video center style
Restore top of video when exiting full screen
When exiting the full screen, the event will be launched and the center style will be removed from the event
Live broadcast full screen
In the live scene, the video will fill the whole screen, showing comments, likes, anchor and audience information, etc., such as:
Code can refer to the full screen live H5LiveDemo
Creating a player
The x5_fullscreen and x5_type attributes are used to specify full-screen video playback and enable H5 layer playback. In addition, the Controlbar needs to be deleted and the skinLayout UI needs to be customized.
Processing when full screen playback is displayed
When the play button is clicked to start playing, the wechat hijacking video will pop up to play in full screen. At this time, Aliplayer will also trigger the full screen event, and call cancel the full screen method here, and adjust the layout of comments and likes.
Change the video display mode
Contain a full screen video. If you want to contain no video, set object-fit to contain or other folders
Close the page when wechat returns
Wechat opens another page above the original page to play the video in full screen. If the normal process returns to the original page of the program, I hope to directly close the page when I return.
Video display mode and position
If top and Center of “X_video_position” cannot meet the requirements, you can customize the object-fit and object-position attributes to set the video display mode and position more flexibly.
Object – fit attributes
The object-fit CSS property specifies how the content of the replacement element should fit into the box it uses to determine the height and width
Optional values:
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
Effect of each value:
Object – position attribute
The object-position CSS property controls where to replace content, similar to the background-position property. For example:
CSS code
The effect
Author: Mu Qin