WEB视频自适应（上）

有时需要在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