video的概念在h5已经是存在了很久了，但是等到小视频、短视频元年的大火大热之后，国内才慢慢的进入淘汰flash播放器加紧脚本学习h5播放器。然而在国外（YouTube）早已用上了h5播放器，因此我也不能落后，得加紧时间学习，不然就没饭吃了。
好了，在了解html5播放器的知识之前，我们需要了解一下以下的前置知识，当作扩充一下自己的知识库。
前置知识
封装格式
将一些视频信息，音频信息，时间码，编码器信息，打包成一个文件，便于管理以及编辑，常见的有AVI，RMVB，MOV，MP4，FLV等。为什么要有这么多封装格式呢？可以想下为什么图片有那么多封装格式呢？如PNG，JPG，GIF等，道理是一个样的。
编码方式
简单来说，编码方式就是我们压缩或者解压音视频数据的一个算法。MPEG 2，MPEG 4，Prores 422，Prores 444，H.265 以及常用的 H.264。不同的编码方式会让视频呈现出不同的分辨率以及视频大小，封装格式以及编码方式都会影响视频的质量。
在每个影片容器中，音频和视频轨道都使用不同的编解码器来编码。编解码器决定了浏览器在播放时应该如何解码音频和视频。
码率
码率就是指视频或者音频每秒钟的数据量，单位是MBPS或者KBPS。码率越高视频就越清晰，但是码率同时会受分辨率和帧速率影响。
举个例子：
一个视频分辨率为 1080P，码率为5MBPS 会比 一个视频分辨率为 4K，码率照样为5MBPS的清晰。因为分辨率更高的同时，是需要高码率来做支撑的，也就是同码率的情况下，分辨率越高视频越不清晰。
一个视频帧速率为 30帧，码率为5MBPS 会比 一个视频帧速率为 60帧，码率照样为5MBPS的清晰。因为帧速率更高的同时，是需要高码率来做支撑的，也就是同码率的情况下，帧速率越高视频越不清晰。
码率分为：CBR（固定码率），VBR（可变码率）。
CBR（固定码率）：指的是每一秒码率都是相同的。假如在网络观看视频且网速比较快的情况下，就不会出现卡顿的情况，但是，画面若比较单薄，画面信息比较少，突然颜色变丰富了，画面信息突然多了，那么这下子可能会出现模糊的情况。
VBR（可变码率）：指的是每一秒码率都是变化不固定的。可变码率会根据你视频当中画面的信息量，来自动调整码率，这样就不会出现突然颜色变丰富导致的模糊现象。但是，当我们观看的视频对网速有一定的要求，码率忽高忽低时，那么可能就会造成卡顿的情况。
分辨率
指的是单位长度内，视频包含的像素数量。常见的有 1280 x 720，1920 x 1080，2560 x 1440（2K），4096 x 2304（4K）。
小结：
一个完整的视频大概会拥有meta信息，视频编码器(H.264, MPEG 4)，音频编码器(AAC,OGG)，字幕，描述信息等
Flash
在h5没有出来之前，市面上的播放器几乎都是Flash来播放视频的。最开始是使用embed的方式嵌入播放器，其会调用系统的原生播放器，如windows的media player，mac的quick time等。
embed虽然只需要一行代码
1 | <embed src="src/player.swf" /> |
但是它完全就像黑盒子，无法获取它里面的动态信息，甚至无法跟它交互。但是还可以用object的形式
1 | <object type="application/x-shockwave-flash" class="player" data="//static.hdslb.com/play.swf" width="950" height="482" id="player_placeholder" style="visibility: visible;"> |
flash播放flv，是因为flash本身就内建了H.264，而h5则需要浏览器产商如chrome去支持，但是，要想让嵌入的代码发挥作用，浏览器必须安装相对应的插件，而且还版本合适。插件是在一个封闭的环境中运行，通过脚本无法修改或者操作视频内容。如果插件没有提供API，那么插件运行环境无异于文档中一个独立王国。
Video
先上demo代码
1 | <video src="src/player.mp4" controls> |
但是目前video只支持的视频格式有：MP4(MPEG 4文件使用H264视频编解码器和AAC音频编解码器)，WebM(WebM文件使用VP8视频编解码器和Vorbis音频编解码器)，Ogg(Ogg文件使用Theoraship编解码器和Vorbis音频编解码器)，并且在不同浏览器上不同表现。实际上h5还可以支持m3u8，但m3u8是mac专有的视频格式，所以mac\ios下的浏览器都支持m3u8的播放，而其他浏览器则需要第三方支持解码。
Browser Support
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| IE | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES(>=25) | YES | YES |
注意：video可以添加多个source源来进行兼容适配，这样当第一个不兼容可以往下读取，同样也可以兼容flash播放器
1 | <video controls width="600" height="400"> |
Media Type
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Events
因为pc、android、ios存在差异性，在这里只罗列pc的事件
| # | event(PC) | readyState | 视频状态 |
|---|---|---|---|
| 1 | loadstart | NOTHING | - |
| 2 | suspend | NOTHING | - |
| 3 | play | NOTHING | - |
| 4 | waiting | NOTHING | - |
| 5 | durationchange | METADATA | 获取到视频长度 |
| 6 | loadedmetadata | METADATA | 获取到元数据 |
| 7 | loadeddata | ENOUGHDATA | - |
| 8 | canplay | ENOUGHDATA | - |
| 9 | playing | ENOUGHDATA | 开始播放 |
| 10 | canplaythrough | ENOUGHDATA | 可以流畅播放 |
| 11 | progress | ENOUGHDATA | 持续下载 |
| 12 | timeupdate | ENOUGHDATA | 播放进度变化 |
| .. | … | … | … |
| 23 | progress | ENOUGHDATA | 下载完毕 |
| 24 | suspend | ENOUGHDATA | - |
| 25 | timeupdate | ENOUGHDATA | 继续播放中 |
| .. | … | … | … |
| 48 | timeupdate | ENOUGHDATA | - |
| 49 | timeupdate | ENOUGHDATA | - |
| 50 | seeking | METADATA | - |
| 51 | waiting | METADATA | - |
| 52 | timeupdate | ENOUGHDATA | - |
| 53 | seeked | ENOUGHDATA | 播放完毕进度回到起点 |
| 54 | canplay | ENOUGHDATA | - |
| 55 | playing | ENOUGHDATA | 循环播放 |
| 56 | canplaythrough | ENOUGHDATA | - |
| 57 | timeupdate | ENOUGHDATA | - |
| .. | … | … | … |
demo
参考资料：
