The usage of the player in the same layer is not much different from that of ordinary video elements, only two X5 custom attributes need to be added: "X5- Video-Player-Type" and "X5- Video-Player-Full Screen".
Let's embed a test page in the same layer player:
After clicking Play, the video elements occupy the full screen, and the video part is displayed in the center by default:
According to the official document, the display position of the video part can be modified as long as the "object-position" attribute of the video element is modified, but in fact, the width and height of the video element should be set to the width and height of the screen:
The effect is as follows (right):
Please note that when setting the height of a video element to the screen height, you should use "window.screen.height" instead of "document". documentelement。 Clientheight ",because the latter does not include the height of the navigation bar, which will lead to the inability to fill the screen (as shown on the left above).
Add the title bar below:
However, after clicking Play to enter the full-screen state, the title bar disappears. Since players on the same level can be overwritten, try absolute positioning:
The title bar does block the video, but it has a black gradient and two buttons (bottom left). According to official documents, these cannot be removed.
The next thing to do is to move the video down to make the overall UI consistent with that before entering the full screen (top right):
The next step is to add something else after the video element:
However, after entering the full screen state, the content element moves up (lower left).
Obviously, the position of this element should also be moved down the height of the title bar:
Next try a simple click event response:
At this time, clicking on the content element after entering the full-screen state is unresponsive, because the video element occupies the full screen, and its level is high, blocking the content element. Know the problem, the solution is simple, just improve the level of the main element:
Because the full-screen status of players at the same level can only specify one direction (default vertical screen), vertical screen will still be forced after playing. At this point, the overall effect is not quite right:
Because the width and height of the horizontal screen state are just opposite to the vertical screen state, the UI is abnormal when restoring the vertical screen. So when you enter the full screen, you should judge the width and height. If the width is greater than the height, please replace:
If the page has a scroll bar before playing, can it be scrolled in full screen? The answer is that you can really scroll, but it's not so much scrolling as shaking. You can try the specific effect yourself. In short, after entering the full screen state, do not use page scrolling, but use local scrolling. In addition, it should be noted that because the level is improved, if the content element is too high, the control bar of the video will be blocked.
The last problem is that when playing some video formats, the progress bar will be disordered and even return to non-full screen mode.
This article was also published in the author's personal blog: X5 Player Trial Report | Front-end Development | Hiro's blog.