HTML5 中为视频 video 和音频 audio 元素，提供了属性、方法和事件。这两个元素的常用属性上一节我们已经讲过了，本节我们来讲一下这两个元素的方法。
视频和音频的常用方法
HTML5 中为 video 元素 和 audio 元素提供了一些方法，这些方法可以用于操作 video 元素和 audio 元素，下面我们来看一下：
| 方法 | 描述 |
|---|---|
| paly() | 开始播放音频、视频 |
| pause() | 暂停当前播放的音频、视频 |
| load() | 重新加载音频、视频元素 |
| addTextTrack() | 向音频、视频添加新的文本轨道，所有主流浏览器都不支持此方法 |
| canPlayType() | 检测浏览器是否能播放指定的音频、视频类型 |
其中 paly() 方法和pause() 方法可以用于视频、音频的开始播放和暂停播放，load() 方法用于重新加载视频和音频，下面我们来看一下这些方法的使用。
示例：
在某段音频的下方创建三个按钮，分别是播放音频、暂停音频、重新加载。
首先我们先插入一段音频，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<div>
<audio id="myaudio" controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>
</div>
</body>
</html>
此时音频是可以正常播放的，但我我们要实现的是通过按钮来控制音频的播放和暂停，所以我们要在音频的下方创建三个按钮：
<div style="margin-top:20px ;">
<button type="button">播放音频</button>
<button type="button">暂停音频</button>
<button type="button">重新加载</button>
</div>
这三个按钮就是用于控制音频的播放、暂停和重新加载的按钮。要实现这三个功能其实很简单，只需要调用上面讲到的三个方法即可，在 JavaScript 中通过 getElementById() 方法来获取音频对象的引用：
var myAudio = document.getElementById("myaudio");
然后通过这个引用对象 myAudio 来调用三个方法：
myAudio.play();
myAudio.pause();
myAudio.load();
但是此时这三个方法和上面三个按钮之间没有任何关联，所以我们要想办法让它们关联起来。我们可以通过给按钮绑定 onclick 点击事件的方法，当鼠标点击按钮时，就会触发对应的方法，完整的代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5学习(9xkd.com)</title>
</head>
<body>
<div>
<audio id="myaudio" controls="controls">
<source src="./test.mp4" type="audio/mpeg">
<source src="./test.ogg" type="audio/ogg">
您的浏览器不支持 audio 标签
</audio>
</div>
<div style="margin-top:20px ;">
<button onclick="palyAudio()" type="button">播放音频</button>
<button onclick="pauseAudio()" type="button">暂停音频</button>
<button onclick="loadAudio()" type="button">重新加载</button>
</div>
<script>
var myAudio = document.getElementById("myaudio");
function palyAudio(){
myAudio.play();
}
function pauseAudio(){
myAudio.pause();
}
function loadAudio(){
myAudio.load();
}
</script>
</body>
</html>
在浏览器中的演示效果：
这样我们分别点击页面中的三个按钮，就可以实现播放音频、暂停音频、重新加载音频的功能了。
网友评论