如今在这个特殊的时代下：flash将死未死， 微软 和IE的历史问题，ht ML 5标准未定， 苹果 和 谷歌 的闭 源 和开源之争，移动 互联网 的大势所趋，浏览器各自为战&helli p; 这些都导致web 开发者 在设计视频解决 方案 的时候相当 困惑 。本文围绕这个主题，来探讨一下相关的技 术 ，原理和工具。@H_ 512 _1@
编码与格式的误区
很多人将编码和格式误认为是同一个东西，往往以视频文件的后缀来唯一确定视频文件的支持程度。而事实上，用一句话来概括就是：视频的 文件后缀 （假设没有恶意修改后缀）实际上代表一种封装格式，而视频 或者 音频的编码算法与封装格式本身无直接的关系：同样的封装格式（即同样的后缀）可以封装不同编码算法的视频和音频。而视频播放设备或软件 是否 支持视频的播放，不仅仅要看封装格式，还要看编码算法。认清这 一点 是理解和排查问题的基础。
封装格式规定了视频的所有内容，包括图像， 声音 ，字幕，系统控制等，其中以图像和声音最为关键。
从M PE G说起
MPEG是一个定义视频规格的 国际 组织，他们曾经推出的MPEG-1和MPEG-2实际上分别就是大家熟知的VCD和 DVD ， 不过 这都是远古的东西了。我们来看看跟本文主题有关的MPEG-4规范。
MPEG-4规范规定了 文件后缀名 为.mp4，目前包括三种图像编码和压缩算法：Xvid\DivX\AVC(H.264)，其中Xvid和DivX也可以统称为MPEG-4 Part 2或者MPEG-4 Visual ，而更为知名的H.264和AVC是相同的概念。音频方面则是AAC。以下关于兼容的内容，来源于维基 百科 和格式工厂以及笔者的测试：
And ROI d浏览器：支持DivX和AVC，Xvid 应该 不支持
iPhone和iPad（iOS）：支持DivX和AVC，Xvid不支持
Ch rom e：支持AVC，不支持DivX和Xvid。谷歌曾在2011年初宣布由于许可问题，将移除C hr ome浏览器对AVC(H.264)的支持。但是直到目前的版本，AVC还在被支持。另外，实际测试下来，如果是DivX和AAC封装在mp4中的话，chrome可以播放，但是只有声音(AAC)。
Firefox和 opera ：还是由于许可的问题，Firefox和Opera逐渐动摇了对AVC的支持，笔者在最新的Firefox中测试AVC仍然可以播放（维基百科的解释是可能与系统本身具有解码器有关）；至于DivX和Xvid，笔者在Firefox下的测试结果是不支持。从维基百科的兼容列表看，Opera对AVC支持的不好。
IE：笔者的IE11能够支持AVC，不支持DivX和Xvid
WebM的倡导
由于AVC(H.264)的授权问题，以Chrome、Firefox、Opera为首的开源阵营 开始 动摇对AVC的支持，尽管目前这些浏览器仍然能够支持AVC，但是它们也倾向于一个叫做WebM的开源多媒体项目，该项目包括一个叫VP8的新的开源视频编解码方案。目前VP8已经 发展 到了VP9。作为封装格式的WebM具有.webm的后缀和video/webm的 MIME类型 。在音频方面，可以使用Vorbis/Opus。从兼容性看，Chrome、Firefox、Opera对VP8的兼容性相当 理想 ，但是Safari和IE几乎无法支持。
开源的Ogg
Ogg几乎与WebM相同，开源，被广泛的在开源平台支持。其视频编码方案称为Theora(有V P3 发展而来，由Xiph. org 基金会开发，可被用于任何封装格式)，音频为Vorbis。后缀通常为.ogv或.ogg，MIME类型为video/ogg。在兼容性上，Chrome、Firefox、Opera能够支持（但是Opera在移动平台上无法支持），但是Safari和IE几乎无法支持。
Html5方案
以上的讨论实际上的大前提是：视频基于Html5的<video>方案。现在我们来总结一下兼容性：
*IE9 [只有当用户安装了VP8的编解码器时]才能支持VP8。
‡ GOOGLE Chrome 2011年宣布 放弃 H.264, 但是[还没兑现]。 可以看出现在主流的仍然是MP4(AVC)，但是为 了解 决[开源阵营]对AVC的摇摆不定，可以选择 利用 video的多源方案，在AVC的基础上额外提供对webm或ogg的支持：
XM L/HTML Code 复制内容到剪贴板
@H_ 777 _49@ < video poster = " ;m ovie. jpg " controls > < source src = "movie.webm" type = 'video/webm; codecs="vp8.0, vorbis"' > < source src = "movie.ogg" type = 'video/ogg; codecs="theora, vorbis"' > < source src = "movie.mp4" type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > < p > This is fallback content </ p > </ video >
浏览器会根据自己的偏好来选择具体加载那种格式的流媒体文件，当然服务端必须对同一个视频提供多种格式的支持，具体可以这么做：
提供一个WebM的视频版本（VP8+Vorbis）
提供一个MP4的视频版本（H.264+AAC(low complex IT y)）
提供Ogg版本（Theora+Vorbis）
服务端推荐使用n gin x，尽量注意MIME类型的配置正确
旧版本的IE和flash
在html5流行之前，通用的视频播放解决方案是flash和flv（flash从9开始支持h.264的mp4）。但是随着ios设备的流行，flash已经不是万能药了，越来越多的 视频网站 提供多元的解决方案，而且偏向于html5：也就是说，通过检测agent是否支持html5来决定使用video还是flash。在 面对 IE8以下的浏览器时，flash几乎是唯一的选择(silverlight的接受度普遍不高)。
当然针对flash和flv的方案，也有多种实现方法，笔者能够想到的有如下两种：
服务端根据agent的类型，输出不同的html，如果支持html5就输出video+mp4(avc)和webm（或者ogg），否则输出flash相关的标签或脚本
使用html5shiv和 HTML5- video是IE也能够支持 video标签 ，并且使用Flash播放器来代替原生的video播放。
将object内嵌在video中：
XML/HTML Code 复制内容到剪贴板
< video id = "movie" width = "320" h ei ght = "240" PR eload controls > < source src = "pr6.webm" type = "video/webm; codecs=vp8,vorbis" /> < source src = "pr6.ogv" type = "video/ogg; codecs=theora,vorbis" /> < source src = "pr6.mp4" /> < object width = "320" height = "240" type = "application/x -s hockwave-flash" data = "flow player -3.2.1.swf" > < par am name = "movie" value = "flow play er-3.2.1.swf" /> < param name = "allowfullscreen" value = "true" /> < param name = "flash VAR s" value = " config ={'clip': {'url': 'http://wearehugh .COM /dih5/pr6.mp4', 'autoPlay':false, 'autoBuffering':true}}" /> < p > Download video as < a href = "pr6.mp4" > MP4 </ a > , < a href = "pr6.webm" > WebM </ a > , or < a href = "pr6.ogv" > Ogg </ a > . </ p > </ object > </ video >
总结
以上是 为你收集整理的 浅谈基于HTML5的在线视频播放方案 全部内容，希望文章能够帮你解决 浅谈基于HTML5的在线视频播放方案 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于浅谈基于HTML5的在线视频播放方案的详细内容...