Recently, the company’s project has a need to play video locally. We all know that there is a special tag video in HTML5 to embed the video. However, this video tag has many attributes that may not be familiar to many students. Let’s get to know:
The method of embedding an HTML5 video player in a web page is very simple:
<video
controls
autoplay
loop
preload="auto"
poster="img/popup-img.png"
webkit-playsinline="true"
playsinline="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x-webkit-airplay="allow"
x5-video-orientation="portraint"
style="object-fit:fill">
<source src="./img/WeChatSight125.mp4" type="video/mp4">
<source src="./img/WeChatSight125.ogg" type="video/ogg; codecs=dirac, speex">
<p>你的浏览器不支持 <code>video</code> 标签.</p>
</video>
-
controls: Display standard HTML5 video/audio player control strips and control buttons.
-
autoplay: Let the file play automatically.
-
loop: Let the file play in a loop.
-
The preload="auto" attribute is used to cache large files. It has three optional values:
- "none" do not cache
- "auto" cache
- "metadata" only cache file meta information
-
poster="img/popup-img.png" / video cover /
-
webkit-playsinline="true" / This attribute is useful for setting in ios 10. The others are not working yet, 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 playing in small windows /
-
x5-video-player-type="h5" / Enable the H5 player, which is a feature of the Android version of wechat /
-
x5-video-player-fullscreen="true" / Full screen setting, set to true to prevent horizontal screen />
-
x5-video-orientation="portraint" /Orientation of the player screen, landscape horizontal screen, portraint vertical screen, the default value is vertical screen /
-
The source tag is to be compatible with the support of various browsers for different media types. We can use multiple <source> elements to provide multiple different media types. Browsers that support mp4 format video streams can play mp4 files. If not, you can play Ogg files.
-
codecs=dirac, speex is used to specify the decoder (codecs) used for playback; in this way, the browser can be more precise how to play the provided video.
The above attributes can be added according to your own situation, not all of them are required.
There are a few of the above attributes that need to be explained in particular:
webkit-playsinline and playsinline: When the video is played, it will be played locally without leaving the document stream. But this attribute is quite special, it needs to be embedded in the webpage APP such as UIwebview in WeChat allowsInlineMediaPlayback = YES, webview.allowsInlineMediaPlayback = YES, in order to take effect. In other words, if the APP is not set, this tag will be invalid if you add this tag to the page. This is why the Android phone WeChat always plays videos in full screen, because the APP does not support playsinline, but ISO's WeChat does.
I need to add here, if you want to do full-screen live broadcast or full-screen H5 experience, ISO needs to set to delete the webkit-playsinline tag, because you set false to not support it, and Android does not need it, because the default full screen is. But at this time, there is a playback control for the full screen, whether you have set the control or not.
x-webkit-airplay="allow" It is temporarily impossible to know exactly what it does, but I guessed that this attribute should enable this video to support the AirPlay function of ios. Using AirPlay can directly play video, music, and photo files from different locations on the device using iOS. That is to say, the wireless playback of audio and video files can be realized through the AirPlay function. Of course, the premise is that the playback terminal device also supports the corresponding functions.
x5-video-player-type: Enable the same layer of H5 player, 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 version. The alias of the same layer playback is also called immersive playback. It appears to be full-screen during playback, but the control and WeChat navigation bars have been removed, leaving only the "X" and "<" buttons. The current players in the same layer are only available on Android (including WeChat) and do not support iOS for the time being. As for why the same layer playback is only open to Android, it is because Android cannot play locally like ISO. The default full screen will block some interface operations. If it is a full screen H5, it is okay, but for live broadcast, such functions as barrage. It can't be realized, so the concept of playing on the same layer solves this problem at this time. However, during the test, it was found that different versions of ISO and Android have slightly different effects.
x5-video-orientation: Declare the orientation supported by the player, the optional values landscape horizontal screen, portraint vertical screen. The default value is portraint. Whether it’s live or full-screen H5 is generally played in vertical screen, but this attribute requires x5-video-player-type to enable H5 mode
x5-video-player-fullscreen: Full screen setting. It also has two attribute values, true and false, true supports full-screen playback, and false does not support full-screen playback.
In fact, the ISO WeChat browser is the core of Chrome, and the related attributes are supported, which is why X5 same-layer playback is not supported. The Android WeChat browser is the X5 core, some attribute tags such as playsinline are not supported, so it is always full screen.
There is another problem. In the Android WeChat, even if the above attributes are added, there will be black borders on the top and bottom and the problem of not being able to full screen.
Solution: Add the style attribute of object-fit: fill; to the video . If there are still black bars, it may be that the video size is not suitable.
However, the above attributes alone cannot solve the problem that the page is not played in full screen on the mobile terminal, and our following method can only prevent the video from being played in full screen on Apple phones. Some Android models cannot solve the problem of playing in full screen using the following method. The problem.
Here comes the focus -the specific method is to use this particularly good plug-in: iphone-inline-video
Enter the github address, you can see a demo folder, the directory structure is as follows:
iphone-inline-video.jpeg
There is also a page used in the demo to show the 3D effect-threejs.html, which is not used in the current project, so you can leave it alone.
You can know how to use this plug-in by checking the code of the selected files. I downloaded it locally and cut the picture. Let’s take a look.
index.html.jpeg
When using, you must add the attribute playsinline. This is very important. The other attributes can be added according to your own situation. It is also necessary to quote the iphone-inline-video.js file. In addition, there are some css. The code must also be added. I have made some deletions in the project according to my own situation. For details, you can take a look at the code I used myself:
HTML code:
<div class="video-container">
<video controls playsinline
preload="auto"
poster="img/popup-img.png"
webkit-playsinline="true"
playsinline="true"
x5-video-orientation="portraint">
<source src="./img/WeChatSight125.mp4" type="video/mp4">
<p>你的浏览器不支持 <code>video</code> 标签.</p>
</video>
</div>
css code:
.video-container{
width: 100%;
height: 5.6rem;
overflow: hidden;
}
video {
display: block;
width: 100%;
height: calc(100vw / 16 * 9);
margin: auto;
}
@media (min-width: 500px) {
video {
height: calc(500px / 16 * 9)
}
}
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
opacity: 0;
pointer-events: none;
width: 5px;
}
figure {
width: 100%;
}
js code:
<script src="js/iphone-inline-video.js"></script>
<script src="js/videos.js"></script>
Look at the code in videos.js as shown below:
videos.jpeg
I have not expanded all the code here. You can download it on github when you use it yourself. I copied it and pasted it directly. Except for the two small areas underlined in red at the top, I haven't moved anything. .
Another thing is to use a pure HTML+CSS method to control the size of the Video’s video and the Poster’s poster image (not the original size of the video, and the ratio is locked).
The solution currently thought of for the time being is to add a div outside the video tag with the same width and height as the video, and then directly add the background-image attribute to the div without the poster attribute, the effect is the same as the poster, and then use the background-size to control the width and height. Up
<div id="image-wrap"> <div></div></div>
/* scss 语法 */
#image-wrap {
width: 100%;
height: auto;
padding-bottom: 70%;/* 比例 10 比 7 */
position: relative;
border: 1px solid red;
& > div {
background: url(/path/to/your/image) no-repeat center center;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background-size: 100%;
}
}
If you use videojs, you can find .vjs-poster in the css file of videojs:
.vjs-poster {
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
background-position: 50% 50%; /* background-size: contain; */
background-size: 100% 100%;
background-color: #000000;
cursor: pointer;
margin: 0;
padding: 0;
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
height: 100%;
}
Modify the default:
background-size: contain;
to:
background-size: 100% 100%;
Above part of the reference from the following two articles, more details can enter the following pages to know:
HTML5 video <video> / Audio <audio> Usage introduce
H5 Case Study: micro-channel full-screen video playback issues
of: May you like summer The cool wind of the day
Link: https://www.jianshu.com/p/8c17967adee7