4 HTML躬行记——Web音视频基础( 二 ) _生活百科

HLS（HTTP Live Steaming ， HTTP 直播流协议）的工作原理是把整个流分成一个一个的基于 HTTP 的文件来下载，每次只下载部分。
视频封装格式也叫容器，可以将已经编码并压缩好的视频轨和音频轨按照一定的格式放到一个文件中。
视频编码格式能够对数字视频进行压缩或解压缩的程序或设备，也可以指通过特定的压缩技术，将某种视频格式转换成另一种视频格式。
常见的视频编码格式有几个大系列，包括 MPEG-X、H.26X 和 VPX 等。
H.264（H.264/MPEG-4 或 AVC）是一种被广泛使用的高精度视频的录制、压缩和发布格式， H.265 是它的继任者。
一个原始视频，若没有编码，则体积会非常大。假设图的分辨率是 1920*1080 ，帧率为 30 ，每像素占 24b ，那没张图占 6.22MB左右， 1 秒的视频大小是 186.6MB左右， 1 分钟就是 11G了。
对原始视频进行压缩的目的是去除冗余信息，这些信息包括：

空间冗余，在图像数据中，像素间在行、列方向上都有很大的相关性，相邻像素的值比较接近或者完全相同。
时间冗余，在视频图像序列中，相邻两帧又许多共同的地方，可采用运动补偿算法来去掉冗余。
视觉冗余，相对于人眼的视觉特性而言，人类视觉系统对图像的敏感性是非均匀和非线性的，并不是所有变化都能被观察到。
结构冗余，在图像的纹理区，以及图像的像素值存在明显的分布模式。
知识冗余，对许多图像的理解与某些先验知识有相当大的相关性，这类规律可由先验知识和背景知识得到。

视频播放器播放本地视频文件或互联网上的流媒体文件大概需要解协议、解封装、解码、音视频同步、渲染等几个步骤，如下图所示。

文章插图
二、Web中的音视频HTML5 标准推出后，提供了播放视频的 video 元素，以及播放音频的 audio 元素。
为了能更精准的控制时间、容器格式转换、媒体质量和内存释放等复杂的媒体处理， W3C 推出了 MSE（Media Source Extensions）媒体源扩展标准。
若要访问浏览器中已有的编解码器，可以试试 WebCodecs ，它可以访问原始视频帧、音频数据块、图像解码器、音频和视频编码器和解码器。
在浏览器中主流的视频编码格式是 H.264/MPEG-4 ，不过需要支付专利费。

文章插图
而 Google 推出的开源编码格式：VP8 ，除了 IE 之外，其他浏览器的高版本都能支持。

文章插图
最新的 H.265 和 VP9 在浏览器的兼容性上都不理想，有些第三方库会自己写一个 H.265 的解码器脚本，然后来播放视频。
1）播放器
直播使用 video 元素播放视频很多功能都无法满足，因此很多时候都会引入一个播放器，例如 video.js、react-player 等。
这些播放器都能支持多种格式的视频，例如 flv、m3u8、mp4 等；并且有完整的控制键，例如音量、缩放、倍速等，覆盖移动和 PC 两个平台，以及可引入插件等。