Recently, the company's products need to be upgraded, and the upgrade content includes a product interpretation video to show the particularity of the product. Take this opportunity to study the H5 tag Video.
Attach the effect:
Video commonly used attributes are src, poster, preload, autoplay, loop, controls, width, height
1. src and poster
src is used to specify the address of the video; poster is used to specify a picture, which will be displayed when the current video data is invalid, and can be used as a preview picture. Invalid video data may be the video is loading or the video URL is wrong.
<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4"/>2、preload
It is used to define whether the video is preloaded. The attribute has three optional values: none, metadata, auto, and the default is auto.
- none: Do not preload. Using this attribute value, it may be that the author of the page thinks that the user does not expect this video, or reduces the HTTP request.
- metadata: Partially preloaded. Using this attribute value means that the author of the page believes that the user does not expect this video, but provides the user with some metadata (including size, first frame, track list, duration, etc.).
- auto: All preloaded.
<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4" preload="none"/>3、autoplay
It is used to set whether the video will play automatically. When it appears, it means it will play automatically. If it is removed, it means it will not play automatically.
<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4" preload="none" autoPlay />4、loop
It is used to specify whether the video is played in a loop. It is also a Boolean attribute. If it appears, it means looping, otherwise it will not play.
5、controls
It is used for the playback control bar that requires the browser to enable itself. The control bar includes playback pause control, playback progress control, and volume control
<video ref="video" poster="https://www.baidu.com/xxxx.jpg" src="https://video.mp4" preload="none" controls/>6. source tag
It is used to specify multiple optional (browser can only choose one) video file addresses, and it can only be used when the media tag does not use the src attribute.
The browser detects whether the video specified by the tag can be played according to the order of the source tag (maybe the video format is not supported, the video does not exist, etc.), if it cannot be played, change to the next one. This method is mostly used for compatibility with different browsers. The Source tag itself does not represent any meaning and cannot appear alone.
This tag contains three attributes: src, type, and media.
src attribute: used to specify the address of the media, the same as the video tag.
type attribute: used to describe the type of media specified by the src attribute, and help the browser determine whether it supports the media format of this category before obtaining the media.
media attribute: It is used to indicate which media the media is used in. If it is not set, the default value is all, indicating that all media are supported.
webkit-playsinline playsinline: When the video is playing, it will be played locally, without breaking away from the document stream. But this attribute is special, it needs to be embedded in the webpage APP, such as allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES of UIwebview in WeChat, to take effect.
For users who want to do full-screen live broadcast or full-screen H5 experience, ios needs to delete the webkit-playsinline tag, while android does not, because the default is full screen. But at this time, the full screen has playback controls, whether you have set the control or not. Playback controls may be needed for live broadcasting, but full-screen H5 is not needed, so to remove the controls for full-screen playback, the following settings are required: Play on the same layer.
x5-video-player-type: 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 the Android version of WeChat. The same layer playback alias is also called immersive playback. It looks like full screen when playing, but the control and WeChat navigation bar have been removed, leaving only the "X" and "<" buttons. The current player of the same layer only works on android (including WeChat), and does not support iOS for the time being.
x5-video-orientation: Declare the orientation supported by the player, the optional values are landscape for horizontal screen, portraitt for vertical screen. The default value is portraint. Whether it is a live broadcast or a full-screen H5, it is generally played in a vertical screen. This attribute requires x5-video-player-type to enable the H5 mode.
Android WeChat may add the above attributes, and there will be black borders on the top and bottom, and the problem that it cannot be full screen. You need to add the object-fit: fill; style attribute to the video.
ios black screen problem
When ios is playing a video, there will be a short black screen, and then it will play normally
Overlay one on top of the video divand fill it with a picture of the first frame of the video to create the illusion of loading before playback. Then listen to the event timeupdate, and remove the div when there is a picture in the video playback
<video
ref="video" id="page-video"
playsinline="" webkit-playsinline="true"
x5-video-player-type="h5" x5-video-player-fullscreen="true"
x5-video-orientation="portraint" x-webkit-airplay="true"
raw-controls="true" preload="auto"
src="a.mp4"
@canplay="getVideoInfo" @timeupdate="getCurrentInfo"
/>
<!-- 遮盖层 -->
<div class="video-poster"></div>var videoWindow = document.querySelector(".video-window")
var posterImg = document.querySelector(".video-poster")
document.getElementById("page-video").addEventListener('timeupdate', function(e) {
if(document.getElementById("page-video").currentTime > 0.1){
posterImg.remove();
}
})
A complete example:
<video class="page-video"
width="100%" height="240px" /*如果有封面，请设置高度*/ controls /*这个属性规定浏览器为该视频提供播放控件*/
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小*/
webkit-playsinline="true" /*这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放*/
x-webkit-airplay="true" /*这个属性还不知道作用*/
playsinline="true" /*IOS微信浏览器支持小窗内播放*/
x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/
x5-video-orientation="h5" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*/
x5-video-player-fullscreen="true" /*全屏设置，设置为 true 是防止横屏*/
preload="auto" /*这个属性规定页面加载完成后载入视频*/
</video>