HTML5 视音频发展史

HTML5 视音频发展史

HTML5学堂：在Flash与HTML5的争霸当中，最终Flash败北，而能够替代Flash播放器功能的就是HTML5中的视音频功能。本文介绍了HTML5出现前后，实现视音频方法的变化以及视音频的编码格式。

早期实现视音频的方法

在网页当中，早期的视音频标签通常采用embed和object两种标签嵌套。之所以采用这种方式，主要与两种标签的支持程度有关。

对于embed标签，大部分的浏览器都能够支持，但是并没有纳入到W3C标准当中，而object标签，虽然得到了W3C标准的支持，但是并没有得到大部分浏览器的支持。因此，为了使视音频恩能够够在各个浏览器当中正确的呈现，便出现了混合使用的方式。

HTML5中视音频的新变化

在HTML5视频标签<video>出现之前，网站上使用的视频通常需要用户下载安装插件，例如realplayer、quicktime、windowsmediaplayer，flash等。之前flash曾经风靡一时，但是flash也存在着很大的问题，例如：需要用户手动安装、存在明显的安全性问题、系统资源消耗比较大等等。

苹果手机明确声明，在移动端不再支持flash。安卓平台早期支持flash，但是当安卓手机版本升级到4.0之后，也停止了对flash的支持。之所以出现这样的原因，与flash的劣势息息相关。首先，手机的硬件远远比不上电脑，电脑上的flash对于性能的影响并不是很明显，但是对于手机，只有几百兆赫，内存一般只有几十兆空间，flash对于系统资源的消耗便异常明显了，有时会经常因为flash而出现死机的现象。另外，在手机平台，flash很耗费电量。

欢迎沟通交流~HTML5学堂

基本的视音频编码方式

对于HTML5，支持如下的3种视频编码格式和3种音频编码格式：

视频：Theora、H.264、Vp8

音频：MP3、AAC、Vorbis

其中MP3、AAC音频文件和H.264视频文件格式收费

三种视频编码方式和三种音频编码方式可以组合成如下三种HTML5支持的格式：

Ogg（Theora+Vorbis）

MEPG4（H.264+AAC）

WebM（VP8+Vorbis）

关于浏览器对这三种视频文件的支持 - 至2013年初

2013年2月8日，在最新发布的Firefox Nightly开发版中，H.264、AAC编码的MP4视频，以及MP3音频，都已经在HTML5的<video>和<audio>标签中得到支持，并处于启用状态。这样，用户再也不用手动修改参数来开启对这些格式的支持了，不过这一功能目前还仅限于Windows 7/8系统，Linux、Mac OS X以及老版的Windows都还是默认关闭的。

这一功能还处于测试阶段，欢迎反馈bug。如果一切顺利，它会在Firefox 22正式版中和大家见面，时间是6月22日。在那之前，还会有Firefox 19/20/21三个正式版。

换句话说，火狐浏览器实现了对三种视频格式的全面支持

苹果Safari浏览器：只支持MEPG4（H.264）

IE浏览器：支持MEPG4和WebM

OPERA浏览器：当前支持Ogg和WebM，官网原文如下：

Opera currently supports Ogg/WebM, which is also supported by Firefox and Chrome

对于当前的视音频支持程度