在线播放视频
这算是一篇翻译的文字~主要参考dive into html5 中关于video的章节
简介
几乎在 浏览器上看到的视频，都是通过第三方插件播放的。
视频文件其实包括了两部分知识，一是视频的容器格式，一是视频的编码格式。而我们常说的mp4视频，其实mp4在技术上指的的这个视频的容器格式。
视频播放的三步骤：
（1）视频播放器 解析 视频的容器格式，得到视频里面视频流和音频流的组织方式（知道去哪里找对于的视频流和音频流）
（2） 解析 视频流 在屏幕上展示一系列的画面
（3） 解析 音频流 把声音发送到扬声器
视频
容器格式：指的是如何来存储数据（规定了这个视频文件中的音频流和视频流的存储方式）
编码格式：视频流或音频流的编码方式，一种算法
- web上常见的视频容器格式有：
|
类型 |
扩展名 |
说明 |
|
MPEG4 |
.mp4或者.m4v |
苹果QuickTime支持，Flash 9.0.60.184版本以后支持 |
|
Ogg |
.ogv |
开放标准，不受专利保护；firefox3.5, chrome 4和opera10.5原生支持， 不需要任何基于平台的插件 |
|
Flash Video |
.flv |
Adobe Flash 支持 |
|
webM |
.webm |
免版税的，开源；专为使用HTML5 的video设计 |
|
asf |
.asf |
微软的，需要序列号 |
|
audio video interleave |
.avi |
微软，需要转码以后flash才能用 |
- 常见的视频编解码器有：
(1)H.264(又叫做MPEG-4 part 10，又叫做MPEG-4 AVC又叫做MPEG-4 Advanced Video Coding ) 有专利保护的，这种编码可以嵌入在很多包装类型中，包括mp4和mkv
(2)Theora 开源的，没有专利保护的 ，能够嵌入在任何的包装类型中,它经常嵌在OGG这种包装类型中。不用安装任何插件浏览器就能解码
(3)Vp8开源的，没有专利保护的
- 常见的音频流编解码器有：
(1) MP3 (全名：MPEG-1 Audio Layer 3) 最多支持2个通道的声音。 Mp3是有专利保护的，几乎所有的音乐播放器都支持MP3 文件，mp3音频文件也能够嵌入到任何一种视频包装类型中。Adobe flash 能够播放mp3文件，也能播放mp4文件。（有钱，花钱买授权）
(2) AAC (Advanced Audio Coding) 受保护的。 Acc的上限是48个通道的声音.
QuickTime 支持某些通道ACC Mp4视频, Adobe Flash 支持多有通道的ACC mp4.
(3) Vorbis 常被叫做ogg vorbis（虽然从技术上来说是有问题的） 不受保护的 支持任意数量的声音通道 经常被嵌入在ogg或webM包装类型中，其他的也行比如mp4 和 mkv
可以看到，不管是容器格式还是视频编码，都涉及到专利的问题，如果大家都开源，那就最好不过了，皆大欢喜。问题就是专利问题，使得浏览器的支持情况变得异常复杂。
另外，还有一些值得注意的是，虽然上面讲到了很多格式和编码，不要以为他们的排列组合会多的不计其数，在现实中，大多数还是一些固定搭配。比如H.264+AAC+Mp4
下面是浏览器对视频的支持情况：
* IE9将支持WebM，前提是用户安装了VP8编解码器
† Safari 安装了QuickTime插件，就能支持QuickTime所有支持的类型
‡ Google说到2011年就不再支持H.264，但是没有发生
得到的结论挺崩溃的：
1、 没有一种简单的组合方式是能够在所有的html5浏览器上运行的
2、 在可以看到的未来这点也是不会改变的
3、 视频要能够在跨平台中播放，可能需要不止一次的编码
不过有flash呀，flash可以支持mp4，而且flash99%的市场占有率，还有非常不错的成绩。
所以给出了测试视频能否播放的策略：
1、 使用WebM(vp8+vorbis)
2、 MP4（H.264基线视频+aac 低复杂度音频）
3、 OGG(theora + vorbis)
4、 Video标签中连接三个视频文件，然后后面增加一个基于flash的视频播放器
上兼容性测试的代码：
1 <video id="movie" width="320" height="240" preload controls> 2 <source src="test.webm" type="video/webm; codecs=vp8,vorbis" /> 3 <source src="test.ogg" type="video/ogg; codecs=theora,vorbis" /> 4 <source src="test.mp4" /> 5 6 <object width="320" height="240" type="application/x-shockwave-flash" 7 data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 8 <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 9 <param name="allowfullscreen" value="true" /> 10 <param name="flashvars" value="config={'clip': {'url': 'test.mp4', 'autoPlay':false, 'autoBuffering':true}}" /> 11 <p>Download video as <a href="test.mp4">MP4</a>, <a href="test.webm">WebM</a>, or <a href="test.ogv">Ogg</a>.</p> 12 </object> 13 </video>
把<object>对象写在video中的好处就是，当浏览器不认识video的时候，就会去解析object，这样几乎能覆盖所有的浏览器。
但是，又有一个问题了，上面的代码，有一个前提就是你手上的视频资源需要有webm,ogg,mp4三种格式的，有时候可能你只有一种格式。所以个人觉得，可以采取这种方法：
如果是mp4统一用flash播放，如果是ogg,webm用video也就是html5播放（这些视频在IE10以下就播放不了了），其他的格式用object对象（<object data="test.avi" type="video/avi" />）嵌入到html中播放（此时，在 ie 中,会提醒你是否安装ActiveX控件，安装了就能播放了）
音频的方案同视频~只是把video换成audio吧~
