HTML5+CSS3+JavaScript从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

4.3　使用HTML5音频和视频

现代浏览器都支持HTML5的audio元素和video元素，如IE 9.0+、Firefox 3.5+、Opera 10.5+、Chrome 3.0+、Safari 3.2+等。

4.3.1　使用<audio>标签

视频讲解

<audio>标签可以播放声音文件或音频流，支持Ogg Vorbis、MP3、WAV等音频格式，其用法如下。

    <audio src="samplesong.mp3" controls="controls"></audio>

其中src属性用于指定要播放的声音文件，controls属性用于设置是否显示工具条。<audio>标签可用的属性如表4.3所示。

表4.3　<audio>标签支持属性

　提示：如果浏览器不支持<audio>标签，可以在<audio>与</audio>标识符之间嵌入替换的HTML字符串，这样旧的浏览器就可以显示这些信息。例如：

    <audio src=" test.mp3" controls="controls">
    您的浏览器不支持audio标签。
    </audio>

替换内容可以是简单的提示信息，也可以是一些备用音频插件，或者是音频文件的链接等。

【示例1】<audio>标签可以包裹多个<source>标签，用来导入不同的音频文件，浏览器会自动选择第一个可以识别的格式进行播放。

    <audio controls="controls">
       <source src="medias/test.ogg" type="audio/ogg">
       <source src="medias/test.mp3" type="audio/mpeg">
    您的浏览器不支持audio标签。
    </audio>

以上代码在Chrome浏览器中的运行结果如图4.8所示，可以看到出现一个比较简单的音频播放器，包含了播放、暂停、位置、时间显示、音量控制等常用控件按钮。

图4.8　播放音频

【补充】

<source>标签可以为<video>和<audio>标签定义多媒体资源，它必须包裹在<video>或<audio>标识符内。<source>标签包含3个可用属性：

　media：定义媒体资源的类型。

　src：定义媒体文件的URL。

　type：定义媒体资源的MIME类型。如果媒体类型与源文件不匹配，浏览器可能会拒绝播放。可以省略type属性，让浏览器自动检测编码方式。

为了兼容不同浏览器，一般使用多个<source>标签包含多种媒体资源。对于数据源，浏览器会按照声明顺序进行选择，如果支持的不止一种，那么浏览器会优先播放位置靠前的媒体资源。数据源列表的排放顺序应按照用户体验由高到低，或者服务器消耗由低到高列出。

【示例2】下面示例演示了如何在页面中插入背景音乐：在<audio>标签中设置autoplay和loop属性，详细代码如下所示。

    <audio autoplay loop>
        <source src="medias/test.ogg" type="audio/ogg">
        <source src="medias/test.mp3" type="audio/mpeg">
    您的浏览器不支持audio标签。
    </audio>

4.3.2　使用<video>标签

视频讲解

<video>标签可以播放视频文件或视频流，支持Ogg、MPEG 4、WebM等视频格式，其用法如下。

    <video src="samplemovie.mp4" controls="controls"></video>

其中，src属性用于指定要播放的视频文件，controls属性用于提供播放、暂停和音量控件。<video>标签可用的属性如表4.4所示。

表4.4　<video>标签支持属性

【补充】

HTML5的<video>标签支持3种常用的视频格式，简单说明如下。

　Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。

　MPEG 4：带有H.264视频编码和AAC音频编码的MPEG 4文件。

　WebM：带有VP 8视频编码和Vorbis音频编码的WebM文件。

浏览器支持情况：Safari 3+、Firefox 4+、Opera 10+、Chrome 3+、IE 9+等。

　提示：如果浏览器不支持<video>标签，可以在<video>与</video>标识符之间嵌入替换的HTML字符串，这样旧的浏览器就可以显示这些信息。例如：

    <video src=" test.mp4" controls="controls">
    您的浏览器不支持video标签。
    </video>

【示例1】下面示例使用<video>标签在页面中嵌入一段视频，然后使用<source>标签链接不同的视频文件，浏览器会自己选择第一个可以识别的格式。

    <video controls>
       <source src="medias/trailer.ogg" type="video/ogg">
       <source src="medias/trailer.mp4" type="video/mp4">
    您的浏览器不支持video标签。
    </video >

以上代码在Chrome浏览器中运行时，当鼠标经过播放画面，可以看到出现一个比较简单的视频播放控制条，包含了播放、暂停、位置、时间显示、音量控制等常用控件，如图4.9所示。

当为<video>标签设置controls属性，可以在页面上以默认方式进行播放控制。如果不设置controls属性，那么在播放的时候就不会显示控制条界面。

【示例2】通过设置autoplay属性，不需要播放控制条，音频或视频文件就会在加载完成后自动播放。

图4.9　播放视频

    <video autoplay>
        <source src="medias/trailer.ogg" type="video/ogg">
        <source src="medias/trailer.mp4" type="video/mp4">
    您的浏览器不支持video标签。
    </video >

也可以使用JavaScript脚本控制媒体播放，简单说明如下：

　load()：可以加载音频或者视频文件。

　play()：可以加载并播放音频或视频文件，除非已经暂停，否则默认从开头播放。

　pause()：暂停处于播放状态的音频或视频文件。

　canPlayType(type)：检测video元素是否支持给定MIME类型的文件。

【示例3】下面示例演示如何通过移动鼠标来触发视频的play和pause功能。设计当用户移动鼠标光标到视频界面上时，播放视频；如果移出鼠标光标，则暂停视频播放。

    <video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
       width="400px" height="300px">
       <source src="medias/trailer.ogv" type='video/ogg; codecs="theora, vorbis"'>
       <source src="medias/trailer.mp4" type='video/mp4'>
    </video>

上面代码在浏览器中预览，显示效果如图4.10所示。

图4.10　使用鼠标控制视频播放

上一章目录下一章