HTML5 视频和音频的常用方法

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>

在浏览器中的演示效果：

这样我们分别点击页面中的三个按钮，就可以实现播放音频、暂停音频、重新加载音频的功能了。

链接：https://www.9xkd.com/

来源：oschina

链接：https://my.oschina.net/u/4072026/blog/4422591

标签

javascript

html5

strip