本文将总结自己对视频的研究成果，做一个记录。 它还将促进后代的学习，涵盖视频的各个方面。
我只是突然发现了一个我800年前做的视频播放器，然后我想了想，当时我似乎对它进行了一些研究。
01 视频
虽然视频比网络更早存在，网络诞生于1990年，但视频早在这之前就已经存在了。 视频技术发展了这么多年，其历史的复杂性超乎你的想象。 同时，富文本格式是一个复杂的事情，这使得视频变得更加复杂。
1.1 常用格式
我们在生活中可能遇到过以下格式的视频：
1.2 视频合成
如果你考虑在脖子上拍摄，一个完整的视频可能由以下部分组成：
视频画面的构成大致如右图所示：
下面三张图片都是mp4格式，但是它们的视频编码确实不同。
1.3 三种格式
我们平时所说的mp4到底是什么？ 虽然视频有以下三种格式：
以后，当有人问你视频是什么格式时，一定要先问对方问的是哪种格式。
容器格式规定了视频文件的视频编码器、音频编码器、字幕、缩略图等信息的格式。 常用的视频格式如下，括号内为对应的文件扩展名。
我们再来说一下视频编解码器。 视频编解码器指定压缩视频和播放视频时使用的算法。 常用的视频编解码器如下：
注意：AVC 是 H.264。
音频编解码器与视频编解码器类似，指定音频压缩和播放的算法。 常用的音频编解码器如下：
1.4 视频总结
说了这么多，总结就是下表，列出了常用的视频文件格式及其对应的视频格式。
02HTML5视频
整理完视频的历史，就轮到明天的主角上场了。 我们来谈谈 HTML5 视频。 HTML5 Video包含如下一堆内容：
2.1嵌入&闪存
在开始介绍Video之前，我们先介绍一下之前如何在网页上播放视频。 一开始我们使用embed标签嵌入插件来播放，会调用系统上原生的播放器，比如windows上的Mediaplayer、mac上的quicktime等。
这样做的缺点是，这个区域完全是一个黑匣子html5 ios 视频播放，很难与玩家交流，甚至无法知道是否在玩。
使用形式比较简单，只需下面一行代码，其中src为视频画面的路径。
<embed src="media/helloworld.swf" />因为embed的缺陷，所以就用了flash，感谢flash带来了很棒的体验，但是它的装机量只能达到99%，这些方式的好处是可以和播放器交互，还可以自定义皮肤等； 但缺点也很明显，需要单独开发一个播放器插件（虽然也可以由别人开发），而且其使用方法稍显复杂，需要依赖第三方插件。
播放flash的代码如下，我想没人能记住吧，就像XHTML的doctype一样，尴尬。
2.2视频标签
video标签的灵感来自于img标签，即富媒体。 既然img可以用来导入图片，为什么不能用video导入vide呢？ 因此视频标签。
将视频引入页面的代码就像导入图像一样简单。
src是视频的路径，controls表示显示视频播放控件，默认不显示。 标签之间的文本将出现在不支持视频标签的浏览器中，并显示为备份内容以兼容不支持视频标签的浏览器。
怎么样是不是很简单，虽然video标签还是有一些属性可以配置的。 可以在此处查看属性列表。
2.3VideoDOM
video标签对应一个Video对象，可以通过js进行操作。 Video对象有一组属性和技能，还包括一组风暴。
例如，您可以读取视频的时长和当前播放时间，同时可以设置当前播放时间，还可以在视频暂停时添加自定义风暴。
2.4 兼容性
浏览器支持不同的视频格式。 较小的浏览器制造商如firefox和opera不希望支持商业视频格式（mp4），因为它们需要支付专利费，而较大的制造商如Google和Apple则不希望支持商业视频格式（mp4）。 由于可能的专利问题，支持开源格式。
好消息是firefox现在也支持mp4了html5 ios 视频播放，而opera从12版本开始已经换成了webkit内核，这个问题已经不存在了。
我们来看看PC上的浏览器对视频格式的支持情况。
我们来看看手机上的兼容性。
2.5来源
兼容性的问题没有解决，HTML5也给出了解决方案，就是source标签。
浏览器会先尝试播放第一个视频，如果发现不支持，则会播放第二个视频，以此类推，直到找到一个可以播放的视频，或者全部可以播放的视频。 。 。
注意：浏览器支持video标签。 如果视频无法播放，则不会显示备份解决方案。 需要与不支持video标签的情况区别。
2.6 字幕
字幕也是一个复杂的问题。 一个简单的字幕可能有以下要求：格式、换行、颜色、卡拉OK等。所以现有的字幕格式有50多种。
使用字幕的形式与使用源的形式类似。 同时可以指定多个字幕文件来引用不同语言的字幕。 用户可以选择自己想要的字幕。
vtt格式如下，标记每个字幕开始出现和消失的时间。
WEBVTT
00:00:01.000 --> 00:00:03.000
Butterflies are lovely.
00:00:04.000 --> 00:00:08.000
Don't you think?2.7 一套解决方案
这里有一套完整的解决方案。 支持视频的浏览器会优先使用视频，否则会退化到使用flash，如果不支持flash，则会退化到提示文案。
其实整个过程显然可以反过来，即先使用flash。
03 玩家
很多时候我们无法使用video标签的播放控制。 可能有多种原因，比如自定义皮肤。 这时候我们就需要自己写一个播放器了。
经过头脑风暴，我们大概需要实现以下功能：
如果你有兴趣，可以自己尝试一下。 虽然自己写一个完整的播放器还是很有挑战性的，但好在社区已经帮我们写好了，并且推荐了两个不错的播放器插件。
