3.5 使用HTML5多媒体
3.5.1 使用audio元素
<audio>标签可以播放声音文件或音频流，支持Ogg Vorbis、MP3、Wav等格式，其用法如下。
<audio src="samplesong.mp3" controls="controls"></audio>
其中，src属性用于指定要播放的声音文件，controls属性用于设置是否显示工具条。<audio>标签可用的属性如表3.1所示。
表3.1 <audio>标签支持属性
提示：如果浏览器不支持<audio>标签，可以在<audio>与</audio>标识符之间嵌入替换的HTML字符串，这样旧的浏览器就可以显示这些信息。例如：
<audio src=" test.mp3" controls="controls">
您的浏览器不支持audio标签。
</audio>
替换内容可以是简单的提示信息，也可以是一些备用音频插件，或者是音频文件的链接等。
【示例1】<audio>标签可以包裹多个<source>标签，用来导入不同的音频文件，浏览器会自动选择第一个可以识别的音频文件进行播放。
以上代码在Chrome浏览器中的运行结果如图3.16所示，这个audio元素（含默认控件集）定义了两个音频源文件，一个编码为Ogg，另一个为MP3。完整的过程同指定多个视频源文件的过程是一样的。浏览器会忽略它不能播放的内容，仅播放它能播放的内容。
图3.16 播放音频
支持Ogg的浏览器（如Firefox）会加载piano.ogg。Chrome能同时识别Ogg和MP3，但是会先加载Ogg文件，因为在audio元素的代码中，Ogg文件位于MP3文件之前。不支持Ogg格式，但支持MP3格式的浏览器（IE 10）会加载test.mp3，旧浏览器（如IE 8）会显示备用信息。
<source>标签可以为<video>和<audio>标签定义多媒体资源，它必须包裹在<video>或<audio>标识符内。<source>标签包含3个可用属性。
media：定义媒体资源的类型。
src：定义媒体文件的URL。
type：定义媒体资源的MIME类型。如果媒体类型与源文件不匹配，浏览器可能会拒绝播放。可以省略type属性，让浏览器自动检测编码方式。
为了兼容不同浏览器，一般使用多个<source>标签包含多种媒体资源。对于数据源，浏览器会按照声明顺序进行选择，如果支持的不止一种，那么浏览器会优先播放位置靠前的媒体资源。数据源列表的排放顺序应按照用户体验由高到低，或者服务器消耗由低到高列出。
【示例2】在页面中插入背景音乐：在<audio>标签中设置autoplay和loop属性，详细代码如下。
3.5.2 使用video元素
<video>标签可以播放视频文件或视频流，支持Ogg、MPEG 4、WebM等格式，其用法如下。
<video src="samplemovie.mp4" controls="controls"></video>
其中，src属性用于指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件。<video>标签可用的属性如表3.2所示。
表3.2 <video>标签支持属性
支持HTML5的浏览器有Safari 3+、Firefox 4+、Opera 10+、Chrome 3+、IE 9+等。HTML5的<video>标签支持3种常用的视频格式，简单说明如下。
Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。
MPEG4：带有H.264视频编码和AAC音频编码的MPEG 4文件。
WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。
提示：如果浏览器不支持<video>标签，可以在<video>与</video>标识符之间嵌入替换的HTML字符串，这样旧的浏览器就可以显示这些信息。例如：
<video src=" test.mp4" controls="controls">
您的浏览器不支持video标签。
</video>
【示例1】使用<video>标签在页面中嵌入一段视频，然后使用<source>标签链接不同的视频文件，浏览器会自己选择第一个可以识别的视频文件进行播放。
一个video元素中可以包含任意数量的source元素，因此为视频定义两种不同的格式是相当容易的。浏览器会加载第一个它支持的source元素引用的文件格式，并忽略其他来源。
【示例2】通过设置autoplay属性，不需要播放控制，音频或视频文件就会在加载完成后自动播放。
也可以使用JavaScript脚本控制媒体播放，简单说明如下。
load()：可以加载音频或者视频文件。
play()：可以加载并播放音频或视频文件，除非已经暂停，否则默认从开头播放。
pause()：暂停处于播放状态的音频或视频文件。
canPlayType(type)：检测video元素是否支持给定MIME类型的文件。
【示例3】通过移动鼠标来触发视频的play和pause功能。当用户移到鼠标到视频界面上时，播放视频，如果移出鼠标，则暂停视频播放。
