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