在线播放视频
这算是一篇翻译的文字~主要参考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吧~