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

摘要：事件除了大量属性之外，这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法，该方法接收一种格式编解码器字符串，返回或空字符串。

audio和video元素的用法如下：

</>复制代码 

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

</>复制代码 
  
  
  
  Video player not available.
  
  
  Audio player not available.

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

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

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

DOM部分：

</>复制代码 
    
        
            Video player not available.
        
    
    
        
        0/0
    

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"")){
    //进一步处理
}

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

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

</>复制代码 
var audio = new Audio("lalala.mp3");
audio.autoplay = true;
audio.loop = true;

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