HTML5多媒体播放video元素与audio元素详解

在HTML5问世之前，要在网络上展示视频、音频和动画，除了使用第三方自主开发的播放器外，使用得最多的工具应该是FLASH了，便它们都需要在浏览器中安装各种插件才能使用，而且有时速度很慢。HTML5的出现使这一局面得到改观。在HTML5中，提供了音频视频的标准接口，通过HTML5中的相关技术，视频、动画、音频等多媒体播放再也不需要安装插件了，只需要一个支持HTML5的浏览器就可以了。

本文就来介绍一下HTML5中新增两个元素——video元素与audio元素，它们分别用来处理视频数据与音频数据。

学习内容：

• 知道什么是video元素与audio元素，为什么HTML中要增加这两个元素，怎么在页面中旋转一个video元素或audio元素，至少需要指定的什么属性。
• 掌握video元素与audio元素有哪些性情，如何对这些属性的值进行设定。
• 掌握video元素与audio元素有哪些方法，怎么使用这些方法。
• 掌握video元素与audio属性有哪些事件，什么时候会触发这些事件，如何捕捉这些事件。

HTML4页面中播放视频或音频的方法

在介绍HTML5的video元素和 autio元素之前，让我们先来回忆一下在HTML4页面中是如何播放视频和音频数据的，
如下面代码:

<object classid="clasid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="340" codebase="swflash.cab#version=6,0,40,0">
 <param name="allowFullScreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="allowfullscreen" value="true" />
 <embed type="application/x-shockwave-flash"
 width="425"
 height="340"
 src="a.swf"
 allowscriptacess="always"
 allowfullscreen="true">
 </embed>
</object>

很明显，这段代码具有三个缺点：

• 代码冗长且丑陋。
• 需要使用Flash插件。如果用户滑安装该插件，这段视频就不能看了，画面上会出现一片空白。
• 需要结合使用比较复杂的object元素与embed元素，并且为object元素添加许多属性和参数，代码的书写比较烦琐。

HTML5 页面中播放视频和音频的方法

在HTML5中，新增了两个元素——video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不需要再使用其他插件了，只要使用支持HTML5的浏览器就可以了，同时在开发的时候也不再需要书写复杂的object元素和embed元素了。

现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持。

这两个元素的使用方法都很简单，首先以audio元素为例，只要把播放音频的URl地址指定给该元素的src属性就可以了，如下所示。

<audio src="http://www./demo/test.mp3">
 您好的浏览器不支持audio元素
 </audio>

通过这种方法，可以把指定的音频数据直接嵌入到网页上，其中“您的浏览器不支持audio元素”为在不支持audio元素的浏览器中所显赫的替代文字。

video元素的使用方法也很简单，只要设定好元素的长、宽等属性，并且把播放视频的URL地址指定给该元素的src属性就可以了，如下所示。

<video widht="500" height="300" src="http://wwww./demo/test.mp4>
 您好的浏览器不支持video 元素
 </video>

另外，你还可以通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，直到选择到自己支持的播放格式为止。source元素的使用方法如下所示。

<video>
 <!-- 在ogg theora格式、Quicktime格式与mp4格式之间，挑选自己支持的播放格式-->
 <source src='test.ogv' type='video/ogg; codecs="thora, vorbis"'>
 <source src='test.mov' type="'video/quicktime'>
 </video>

source元素具有几个属性：src属性是指播放媒体的URL地址；type表示媒体类型，甚属性值为播放文件的MIME类型，该属性中的codes参数表示所使用的媒体编码格式。type属性是可选属性，但最好不要省略type属性，否则浏览器会在从上往下选择时无法判断自己能不能播放而先行下载一小段视频（或音频）数据，这样就有可能浪费带宽和时间了。

因为各个浏览器对于各种媒体的媒体类型及编码格式的支持情况都各不相同，所以使用source元素来指定多种媒体类型是非常有必要的。

接下来，我们来具体看一下各浏览器对于编码格式的支持情况。

• IE 9
  支持H.264视频编码格式和vp8视频编码格式。
  支持mp3音频编码格式和WAV音频编码格式。
• Firefox 4以上
  支持Ogg Theora视频编码格式和vp8视频编码格式。
  支持Ogg vorbix音频编码格式和WAV音频编码格式。
• Opera 10以上
  支持Ogg Theora视频编码格式和vp8视频编码格式。
  支持Ogg vorbix音频编码格式和WAV音频编码格式。
• Chrome 5以上
  支持H.264视频编码格式、Ogg Theora视频编码格式和vp8视频编码格式。
  支持Ogg vorbix音频编码格式和WAV音频编码格式。

扩展阅读：

HTML5中audio元素和video元素属性

HTML5中audio元素和video元素方法

HTML5中audio元素和video元素事件