<video id="videoID" src="video.mp4" poster="loadbg.jpg" preload="auto" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true"></video>
<video
id="videoID"
src="video.mp4"
poster="loadbg.jpg" video cover
preload="auto"
x-webkit-airplay="allow"
x5-video-player-type="h5" enable H5 The player is the feature of wechat Android version
x5-video-player-fullscreen="true" full screen setting, set to true is to prevent landscape
x5-video-orientation="portraint" The direction of the player payment, landscape landscape, portraitt portrait screen, the default value is vertical screen
webkit-playsinline="true" This property is set in ios 10 to allow the video to be played in a small window, that is, not full-screen playback
playsinline="true" IOS WeChat browser supports playing
style in a small window ="object-fit:fill">
</video>
CSS3: In-depth understanding of object-position/object-fit
video attribute explanation:
preload="auto" : The attribute specifies that the video is loaded after the page is loaded. This property is ignored if the autoplay property is set.
Possible values for general parameters:
auto - loads the entire video
when the page loads meta - only loads the metadata
when the page loads none - does not load the video when the page loads
muted: When this property is set, it specifies The video's audio output should be muted
controls="controls": The attribute specifies that the browser should provide playback controls for the video.
autoplay="autoplay": Video autoplay settings, but experienced people should know that the autoplay tag is not compatible on mobile phones, and the settings in the APP cause it to fail to autoplay, regardless of Android or IOS. Need to simulate autoplay can only be triggered by some events.
webkit-playsinline="true": When the video is played, it is played locally, without departing from the document stream. But this property is special, it needs to be embedded in the APP of the web page, such as allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES in UIwebview in WeChat, to take effect. In other words, if the APP is not set, adding this tag to your page will also be invalid, which is why the Android phone WeChat always plays the video in full screen, because the APP does not support playsinline, but the ISO WeChat does.
It should be added here. If you want to do full-screen live broadcast or full-screen H5 experience, ISO needs to set and delete the webkit-playsinline tag, because if you set false, it is not supported, and Android does not need it, because the default is full screen. But at this time, the full screen has playback controls, whether you have set the controls or not. The playback controls may be needed for live broadcasting, but the full-screen H5 is not needed, so to remove the controls for full-screen playback, the following settings are required: playback on the same layer.
x5-video-player-type="h5": Enable the H5 player of the same layer, that is, when the video is full screen, the div can be presented on the video layer, which is also a unique attribute of WeChat Android. The same-layer playback alias is also called immersive playback. It looks full-screen during playback, but the control and WeChat navigation bars have been removed, leaving only the "X" and "<" keys. The current same-layer player only takes effect on Android (including WeChat), and does not support iOS for the time being. The author has thought about why the same-layer playback is only open to Android, because Android cannot play in the same area as ISO, and the default full screen will block some interface operations. The function cannot be realized, so the concept of playing on the same layer solves this problem at this time. However, in the process of testing, the author found that different versions of ISO and Android have slightly different effects.
x5-video-orientation: declares the orientation supported by the player, the optional values are landscape landscape, portrait portrait. The default value is Portalt. Whether it is live or full screen H5 is generally played in vertical screen, but this property requires x5-video-player-type to enable H5 mode
x5-video-player-fullscreen="true": full screen setting. The setting of true and false will cause the layout to be different