Recently, when I came into contact with playing videos on mobile terminals, it was really a headache for a long time. Hereby to record a wave, miss the original (very unforgettable) days
First of all, remind my friends that h5 actually has its own video playback (this is the most common usage):
About the parameters of the video, you can click here to understand: https://blog.csdn.net/huang100qi/article/details/53405876
(This video source is also found by someone else, but I forgot the address, thank you here 
)
<video preload='auto' src='https://www.seastart.tv/introduce.mp4' controls><p> 不支持video</p> </video>
This is the default effect of controls. Normally, it can meet most needs (if it is not custom control to play and pause, you must add controls, otherwise only one picture will be displayed). By the way, if you only want to leave a part of the default controls, you can only adjust the API for all the controls for the time being (for the specific API, please refer to the link above). Controls currently cannot be used selectively.
The screenshot above is also my heart's secret joy, so simple can be achieved. However, "reality" is always so "pretty"
>>>>>>>>>>>>>>>>>>>>>难 忘 线>>>>>>>>>>>>>>>>>>>>>
Play in WeChat and QQ:
The first question : Tencent forces all non-Tencent video sources to be full screen. The result is that the video quality is blurred and the aspect ratio is out of balance (the screenshot is too big, so I won’t put it, if you are interested, you can try it)
The second question : After the playback is completed, it is a list page of Tencent Video News (for those who want to show their own things, it is a very ~de thing, and for users, the experience is also very intoxicating)
So the product brother is not happy (here is a tribute to all the product brothers 
): Can you make it play on the current page, the full screen is blurred, what do users think~~
Then began the arduous process of finding ways...
<video preload='auto' id='my-video'
src='https://www.seastart.tv/introduce.mp4'
webkit-playsinline='true' /* This property can be set in ios 10, so that the video is played in a small window, that is, it is not played in full screen */
playsinline='true' /* ios WeChat browser supports small window playback */
'x-webkit-airplay='allow'
x5-video-player-type='h5' /* Enable the same-city player */
x5-video-player-fullscreen='true' /* Full screen setting, setting to true is to prevent full screen */
x5-video-ignore-metadata='true'
width='100%' height='100%' controls><p> 不支持video</p> </video>
After this setting is completed, it is actually different from other third-party platforms, that is, it cannot be played on the current page, but will still be played in the center of another page, but compared with the previous full screen and advertisements, the product has been planned to let the landlord go .
By the way, I mentioned that I saw that it is useful to use canvas for playback. The landlord tried it. If there is only one video on the page, you can still try it. But pages with multiple videos and pages with scrolling are very embarrassing. After all, the pages made by canvas cannot be moved, which will be very embarrassing~
Okay, I'll record it here first, and I'll probably miss it when I look at it later... Hahaha $_$ $_$