JavaScript HTML5脚本编程——“媒体元素”的注意要点

audio和video元素的用法如下：

<audio id="player" src="trailer.ogg" poster="universal.gif" controls>不支持音频</audio>
<video id="player" src="trailer.ogg" poster="universal.jpg" width="300" height="200">不支持视频</video>

因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是要像下面这样使用一或多个元素。

<!-- 嵌入视频 -->
<video id="myVideo">
  <source src="conference.webm" type="video/webm; codecs='vp8, vorbis'">
  <source src="conference.ogv" type="video/ogg; codecs='theora, vorbis'">
  <source src="conference.mpg">
  Video player not available.
</video>

<!-- 嵌入音频 -->
<audio id="myAudio">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Audio player not available.
</audio>

属性

点击这里查询video标签接口的兼容性

下表列出了这两个元素共有的属性，通过这些属性可以知道媒体的当前状态。

事件

除了大量属性之外，这两个媒体元素还可以触发很多事件。这些事件监控着不同的属性的变化，这些变化可能是媒体播放的结果，也可能是用户操作播放器的结果。下表列出了媒体元素相关的事件。

自定义媒体播放器

DOM部分：

<div class="mediaplayer">
    <div class="video">
        <video id="player" src="opening.mp4" poster="opening.png" width="300" height="200">
            Video player not available.
        </video>
    </div>
    <div class="controls">
        <input type="button" value="Play" id="video-btn">
        <span id="curtime">0</span>/<span id="duration">0</span>
    </div>
</div>

js部分：

var player = document.getElementById("player"),
    btn = document.getElementById("video-btn"),
    curtime = document.getElementById("curtime"),
    duration = document.getElementById("duration");

btn.onclick = function() {
    if (player.paused) {
        player.play();
        btn.value = "Pause";
        duration.innerHTML = player.duration;
    } else {
        player.pause();
        btn.value = "Play";
    }
};

player.onended = function() {
    btn.value = "Play";
};

var x = setTimeout(function timing() {
    curtime.innerHTML = player.currentTime;
    var y = setTimeout(timing, 100);
    y = null;
}, 100);
x = null;

检测编码器的支持情况

有一个JavaScript API能够检测浏览器是否支持某种格式和编解码器。这两个媒体元素都有一个

• canPlayType()方法，该方法接收一种格式/编解码器字符串，返回"probably"、"maybe"或""（ 空字符串）。

空字符串是假值，因此可以像下面这样在if语句中使用canPlayType()：

if (audio.canPlayType("audio/mpeg")){
    //进一步处理
}

canPlayType()传入了一种MIME类型，则返回值很可能是"maybe"或空字符串。这是因为媒体文件本身只不过是音频或视频的一个容器，而真正决定文件能否播放的还是编码的格式。在同时传入MIME类型和编解码器的情况下，可能性就会增加，返回的字符串会变成"probably"。下面来看几个例子。

var audio = document.getElementById("audio-player");

//很可能"maybe"
if (audio.canPlayType("audio/mpeg")){
    //进一步处理
}

//可能是"probably"
if (audio.canPlayType("audio/ogg; codecs=\"vorbis\"")){
    //进一步处理
}

注意，编解码器必须用引号引起来才行。下表列出了已知的已得到支持的音频格式和编解码器。

Audio类型

原生的JavaScript构造函数Audio，可以在任何时候播放音频。

var audio = new Audio("lalala.mp3");
audio.autoplay = true;
audio.loop = true;

创建新的Audio实例即可开始下载指定的文件。下载完成后，调用play()就可以播放音频。 在iOS中，调用play()时会弹出一个对话框，得到用户的许可后才能播放声音。如果想在一段音频播放后再播放另一段音频，必须在onfinish事件处理程序中调用play()方法。