媒体元素

HTML5新增了两个与媒体相关的标<audio>、<video>。可以在网页中嵌入跨浏览器的音频和视频内容。

<audio  src="音频文件"  id="myAudio">在浏览器不支持时显示的文本</audio>
<video src="视频文件" id="myVideo">在浏览器不支持时显示的文本</video>

对于audio元素而言，可以通过创建Audio实例，然后传入音频文件。

var audio = new Audio("音频文件");
EventUtil.addHandler(audio,"canplaythrough",function(event){
        audio.play();
    });

由于浏览器不一定支持所有的媒体格式，通常不在标签内指定src属性，而使用多个<source>元素,如：

<audio  id="myAudio">
        <source src="song.mp3" type="audio/mpeg">
        <source src="song.ogg" type="audio/ogg">
        在浏览器不支持时显示的文本
</audio>

【媒体属性】这些属性可以知道媒体的当前状态

---

【媒体事件】这些事件监控着属性的变化

自定义媒体播放器的一个小例子：

【HTML代码】：
    <div id="mediaplayer">
            <div class="video">
                <video id="videoPlayer"src="movie.mov" poster="../images/1.jpg" width="300" height="200">视频播放器无效</video>
            </div>
            <div class="controls">
                <input type="button" value="play" id="videoBtn">
                <span id="curtime">0</span>/<span id="duration">0</span>
            </div>
    </div>

【Js代码】：
    var player = document.getElementById("videoPlayer"),
        btn = document.getElementById("videoBtn"),
        curtime = document.getElementById("curtime"), //已经播放的秒数
        duration = document.getElementById("duration"); //总播放时间
    //更新播放时间
    duration.innerHTML = player.duration;

    EventUnit.addHandler(btn,"click",function(event){
        if(player.paused){
            player.play();
            btn.value = "pause";
        }
        else{
            player.pause();
            btn.value = "play";
        }
    });
    //定时更新当前时间
    setInterval(function(){
        curtime.innerHTML = player.currentTime;
},250);

---

【检测浏览器是否支持某种媒体格式以及编码解码器】
通过使用canPlayType(字符串)方法，返回值有3种：“probably”、“maybe”、空字符串“”