有时需要在web页面中载入视频，我们会用到HTML5视频播放器代码，如下显示：
<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>
但是不能自适应，有的视频全屏播放上下还有黑边框，用户体验很不好。
要解决视频自适应和无黑边的问题，我们先了解下分辨率。
一、分辨率
分辨率决定了位图图像细节的精细程度，通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，画质就越好。
1、视频分辨率：
我们在观看手机视频时可以选择标清(480P)/高清(720p)/全高清(1080p)
所谓标清，英文为"Standard Definition"，是物理分辨率在1280P*720P以下的一种视频格式。
所谓全高清(FULL HD)，是指物理分辨率高达1920×1080显示(包括1080i和1080P)。
i (Interlace Scaninterlace)是指隔行扫描;
P (ProgressiveScan)代表逐行扫描;
这两者在画面的精细度上有着很大的差别，相同分辨率情况下逐行扫描的画质要高于隔行扫描。1080P的画质要胜过1080i。像720p就是指1280×720(宽x高)逐行扫描，1080i就是1920×1080隔行扫描，1080p是指1920×1080逐行扫描。
可见，买电视1080p 配置高于1080i
2、设备屏幕分辨率
(1)宽高比16:9
根据人体工程学的研究，发现人的两只眼睛的视野范围是一个长宽比例为16：9的长方形，因此，现在厂商对手机电脑电视屏幕的设计宽高比多半是16:9的尺寸，而且这个比例的分辨率有好几种。
16:9的分辨率有以下几种：
1、3840×2160（超高清4k），这个是2k摄影机和高清电视分辨率的4倍，属于超高清分辨率。
2、2560×1440（2k），在数字电影制作中，它是进入2k的门槛，分辨率的标准来自传统的超级35毫米电影。
3、1920×1080（1080p全高清/蓝光HD），数字电视与计算机技术的完美融合，是一种在逐行扫描下达到1920×1080的分辨率的显示格式。
4、1600×900，适用范围比较小，只有15.6寸笔记本和20寸的液晶显示器。 5、1280×720（720p高清）
(2)宽高比4:3
4:3 是最常见屏幕比例，从电视时代流传下来的古老标准。在近代宽屏幕兴起前，绝大部分的屏幕分辨率都是照着这个比例的。
4:3的分辨率如下:
320×240、640×480、800×600、1024×768、1152×864、1280×960、1280×1024、1400×1050、1600×1200、1920×1440等都是4:3分辨率的。
3、如何区分视频是16:9和4:3
将视频分辨率的宽度除以高度，运算结果接近1.7的是16:9（超过1.77都归类为16:9），运算结果接近1.3的4:3。
例如您要上传的视频分辨率是 640×480，用640/480=1.33，那么这个就是一个4:3的视频。
根据视频播放时的形状也可以目测出视频是16:9还是4:3，当播放的视频是扁长形状时可以判定该视频为16:9，当视频形状是近似于正方形时，可判定该视频是4:3。
但也有部分视频分辨率并不规则，我们可以将运算结果小于1.3的归类为4:3，大于1.5的归类为16:9。
比例换算示例：
宽640 按照16比9比例计算,高(h)就是360
640：h=16:9
16h=640×9
h=360
现在大多设备屏幕分辨率都是16：9，因此视频制作输出比例16：9为最佳，全屏播放，视频就会铺满整屏，上下就不会有黑边。
二、视频自适应
解决了视频显示时的黑边问题，下来我们就看看如何让视频在web端自适应。
1、标准的HTML5 视频
<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>
设置video标签属性宽度为100%，高度为auto,如下：
video {
/*width:100%*/
max-width: 100%;
height: auto;
}
如果 width 属性设置为 100%，视频播放器会根据屏幕大小自动调整比例,且可以比原始尺寸大
max-width 属性设置为 100%, 视频播放器会根据屏幕自动调整比例，但不会超过其原始大小
2、内嵌外部平台视频
要在网页中载入其他视频平台的视频，各平台都提供了通用的代码，如下：
优酷视频
<iframe height=498 width=510 src='https://player.youku.com/embed/XNDgzNDM2NTM1Ng==' frameborder=0 'allowfullscreen'></iframe>
腾讯视频
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=j0034vhhoxr" allowFullScreen="true"></iframe>
爱奇艺
<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>
这些通用代码在页面中的显示很不理想，需要给包含iframe的div容器中添加一个类名video-container，如下：
.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、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%;
}
这里的56.25%;就是16:9宽高百分比。
<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>
显然，div里除了video还可以载入iframe,embed,object,均可自适应显示。
单页面使用，可依照上面代码；如项目前端基于bootstrap，已引入bootstrap.css，页面div直接调用就行。
<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">