Sometimes it is necessary to load the video in the web page, we will use the HTML5 video player code, as shown below:
<video width="320" height="240" controls="controls">
<source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
But it cannot be adaptive. Some videos have black borders on the top and bottom of full screen playback, which makes the user experience very bad.
To solve the problem of video adaptation and no black edges, we first understand the resolution.
1. Resolution
Resolution determines the fineness of the bitmap image details. Generally, the higher the image resolution, the more pixels it contains, the clearer the image and the better the picture quality.
1. Video resolution:
We can choose SD (480P)/HD (720p)/Full HD (1080p) when watching mobile video
The so-called standard definition, English is "Standard Definition", is a video format with a physical resolution below 1280P*720P.
The so-called FULL HD refers to a display with a physical resolution of up to 1920×1080 (including 1080i and 1080P).
i (Interlace Scaninterlace) refers to interlace scanning;
P (ProgressiveScan) stands for progressive scan;
the two have a big difference in the fineness of the picture, and the picture quality of progressive scan is higher than interlaced scan under the same resolution . The picture quality of 1080P is better than 1080i. Like 720p means 1280×720 (width x height) progressive scanning, 1080i means 1920×1080 interlaced scanning, and 1080p means 1920×1080 progressive scanning.
It can be seen that the 1080p configuration of buying a TV is higher than 1080i
2. Device screen resolution
(1) Aspect ratio 16:9
According to ergonomic research, it is found that the field of view of two human eyes is a rectangle with a 16:9 aspect ratio. Therefore, manufacturers now Most TV screens are designed with a 16:9 aspect ratio, and there are several resolutions for this ratio.
The resolution of 16:9 is as follows:
1. 3840×2160 (Ultra HD 4k). This is 4 times the resolution of 2k cameras and HD TVs, and belongs to ultra HD resolution.
2. 2560×1440 (2k), it is the threshold for entering 2k in digital film production, and the resolution standard comes from the traditional super 35mm film.
3. 1920×1080 (1080p full HD/Blu-ray HD), the perfect fusion of digital TV and computer technology, is a display format that achieves 1920×1080 resolution under progressive scan.
4. 1600×900, the scope of application is relatively small, only 15.6-inch notebook and 20-inch LCD. 5. 1280×720 (720p HD)
(2) Aspect ratio 4:3
4:3 is the most common screen ratio, an ancient standard handed down from the television era. Before the rise of modern wide screens, most screen resolutions were based on this ratio.
The resolution of 4:3 is as follows:
320×240, 640×480, 800×600, 1024×768, 1152×864, 1280×960, 1280×1024, 1400×1050, 1600×1200, 1920×1440, etc. 4:3 resolution.
3. How to distinguish the video is 16:9 and 4:3
Dividing the width of the video resolution by the height, the calculation result is close to 1.7 is 16:9 (more than 1.77 are classified as 16:9), and the calculation result is close to 4:3 of 1.3.
For example, if the resolution of the video you want to upload is 640×480, use 640/480=1.33, then this is a 4:3 video.
According to the shape of the video when playing, you can also visually determine whether the video is 16:9 or 4:3. When the played video is flat and long, it can be determined that the video is 16:9. When the video shape is approximately square, it can be determined The video is 4:3.
However, there are also some video resolutions that are irregular. We can classify the calculation result less than 1.3 as 4:3, and more than 1.5 as 16:9.
Example of ratio conversion:
width 640 is calculated according to the ratio of 16 to 9, and the height (h) is 360
640: h=16:9
16h=640×9
h=360
Most devices now have a screen resolution of 16:9, so the output ratio of video production is 16:9. When the video is played in full screen, the video will cover the entire screen and there will be no black borders on the top and bottom.
2. Video adaptive It
solves the black border problem when video is displayed. Let's see how to make the video adaptive on the web.
1. Standard HTML5 video
<video width="320" height="240" controls="controls">
<source src="https://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
<source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Set the width of the video tag attribute to 100% and the height to auto, as follows:
video {
/*width:100%*/
max-width: 100%;
height: auto;
}
If the width attribute is set to 100%, the video player will automatically adjust the ratio according to the screen size, and can be larger than the original size. The
max-width attribute is set to 100%, and the video player will automatically adjust the ratio according to the screen, but will not exceed its original size. size
2. Embedded external platform videos
To load videos from other video platforms on the web page, each platform provides a common code, as follows:
Youku Video
<iframe height=498 width=510 src='https://player.youku.com/embed/XNDgzNDM2NTM1Ng==' frameborder=0 'allowfullscreen'></iframe>
Tencent Video
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=j0034vhhoxr" allowFullScreen="true"></iframe>
IQIYI
<iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=7ca4a5bf0642444bad57a7e7b94343a0&tvId=1303218690585000&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
The display of these common codes on the page is not ideal. You need to add a class name video-container to the div container containing the iframe, as follows:
.video-container {
position: relative;
padding-bottom: 56.25%; //宽高比例16:9, 宽高比是4:3,值为75%
padding-top: 0;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe height=498 width=510 src='https://player.youku.com/embed/XNDgzNDM2NTM1Ng==' frameborder=0 'allowfullscreen'></iframe>
</div>
3. The video adaptive control in bootstrap:
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
padding-bottom: 75%;
}
The 56.25% here; is the 16:9 aspect ratio.
<div class="embed-responsive embed-responsive-16by9">
<video width="640" height="360" controls>
<source src="https://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4">
<source src="https://www.runoob.com/try/demo_source/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Obviously, in addition to video, div can also load iframe, embed, and object, which can be displayed adaptively.
For single page use, you can follow the above code; if the front end of the project is based on bootstrap, bootstrap.css has been introduced, and the page div can be called directly.
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">