音频与视频播放

本文介绍如何在页面中添加音频和视频等对象，包括HTML5新增的audio和video元素，以及传统的object和embed元素。

audio和video元素

audio用于添加音频播放元素，video则用于添加视频播放元素，它们有一些相同的属性，如：

id和name，设置元素的ID和名称。
src，设置媒体文件位置。
controls，显示播放控制界面
autoplay，自动开始播放。
loop，循环播放。
preload，媒体文件的加载方式。包括none、auto和metadata。其中，auto值时会在后台自动下载全部内容；none和metadata值会在开始播放时下载需要的内容。
mediagroup，设置媒体组名称。相同名称的媒体组可以同步播放，如多个角度的直播，多人视频会议等。

此外，video元素还可以使用width和height属性设置视频播放界面的尺寸，使用poster属性设置视频播放前的图片。

下面的代码定义了一个audio元素，请自行准备/audio/1.mp3音频文件。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <audio src="/audio/1.mp3" controls loop autoplay></audio>
</body>
</html>

audio元素在Chrome浏览器中的默认显示效果如下图所示。

Chrome浏览器中的audio元素

不同的计算机系统和软件环境对于音视频格式的支持也是不同的，提供服务时，相同的内容可以准备多种格式的媒体文件，然后，audio或video元素中使用多个source元素指定不同格式的媒体文件，客户端环境会自动选择支持的格式播放。在<source>标记中，可以src属性指定媒体文件的位置，type属性设置媒体的MIME类型。下面的代码演示了多种音频格式文件的定义。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <audio controls loop autoplay>
        <source src="/audio/1.ogg" type="audio/ogg" />
        <source src="/audio/1.mp3" type="audio/mp3" />
        <source src="/audio/1.wma" type="audio/x-ms-wma" />
    </audio>
</body>
</html>

使用JavaScript控制播放

页面中，还可以使用JavaScript代码控制audio和video元素，常用的操作方法和属性包括：

play()方法，播放。
pause()方法，暂停。
currentTime属性，媒体流的位置，开始位置为0。
playbackRate属性，设置播放的方向和速度。大于0时为正向播放，1为正常播放，2为2倍速播放，以此类推。属性值小于0时为反向播放，-1为正常速度，-2为2倍速。

下面的代码演示了JavaScript代码控制视频播放的基本方法，需要准备/video/1.mp4文件。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <video id="audio1" width="320" height="200"
           src="/video/1.mp4" controls></video>
    <div>
        <input type="button" value="播放1X" onclick="audio_play1x();" />
        <input type="button" value="2X" onclick="audio_play2x();" />
        <input type="button" value="暂停" onclick="audio_pause();" />
    </div>
</body>
</html>
<script>
    function audio_play1x() {
        var aud = document.getElementById("audio1");
        aud.playbackRate = 1;
        aud.play();
    }
    function audio_play2x() {
        var aud = document.getElementById("audio1");
        aud.playbackRate = 2;
        aud.play();
    }
    function audio_pause() {
        var aud = document.getElementById("audio1");
        aud.pause();
    }
</script>

Chrome浏览器中的显示效果如下图所示。

使用JavaScript控制播放

object元素

object元素可以在页面中插入多种类型的对象，其常用属性包括：

width，设置元素的宽度。
height，设置元素的高度。
data，设置对象文件的位置。
type，设置对象文件的MIME类型。

下面的代码演示了如何使用object元素视频，需要准备/video/1.mp4视频文件。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <object width="320" height="200"
             data="/video/1.mp4" type="video/mp4"></object>
</body>
</html>

embed元素

embed元素同样用于页面中插入各种对象，其常用属性包括：

src，设置对象文件位置。
width，设置对象宽度。
height，设置对象高度。
autostart，是否自动播放，属性值为true（是）或false（否）。
loop，是否循环播放，true或false值，或者使用整数指定循环次数。
controls，设置界面要素，包括：console（默认值）、smallconsole、playbutton、pausebutton、stopbutton、volumelever。

下面的代码演示了使用embed对象播放/video/1.mp4。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <embed width="320" height="200" 
             src="/video/1.mp4" autostart="true" controls="console">
</body>
</html>