属性

点击这里

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

attribute

事件

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

events

自定义媒体播放器

DOM部分：

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()方法。

转载地址：http://htwnl.baihongyu.com/

你可能感兴趣的文章