html5——多媒體支持(video/audio)

在html5規範之前,如果希望在網頁上播放視頻、音頻,通常都需要藉助於第三方插件,比如FLASH,除此之外,開發者也可以自主開發多媒體播放插件,但是無論哪種方式,都需要在瀏覽器上安卓插件,HTML5新增了<audio../><video.../>兩個元素,開發者可以通過兩個元素在html頁面上播放音頻視頻。

<audio src="" controls></audio>
<video src="" controls></video>

audio video支持的屬性

屬性名
說明
src
指定播放視頻音頻的URL地址

autoplay

音頻視頻加載完成後會自動播放
controls
顯示播放控制條
loop
 重複播放
preload
預先加載
poster
播放之前,該元素將會顯示該屬性所指定的圖片
width
視頻播放器的寬度
height
視頻播放器的寬度

HTMLAudioElement 與HTMLAudioElement的屬性

屬性名
說明
currentTime
返回播放器當前所處的時間點
paused
true表示暫停
played
播放狀態
startTime
返回播放器播放音頻視頻的開始時間,通常返回0

audio、video元素所持有的事件

事件
說明
onpause
暫停觸發該事件
onplaying
正在播放觸發該事件
onerror
加載數據出錯是觸發該事件
onplay
開始播放時觸發該事件
<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 視頻播放 </title>
</head>
<body>
<h2> 視頻播放 </h2>
<video id="mv" src="movie.webm" loop>
您的瀏覽器不支持video元素
</video><br/>
<input id="bn" type="button" value="播放"/><span id="detail"></span>秒
<script type="text/javascript">
    var bn = document.getElementById("bn");
    var mv = document.getElementById("mv");
    var detail = document.getElementById("detail");
    // 爲video元素的ontimeupdate事件綁定監聽器
    mv.ontimeupdate = function()
    {
        detail.innerHTML = mv.currentTime + "/" 
            + mv.duration;
    };
    bn.onclick = function()
    {
        if(mv.paused)
        {
            mv.play();
            bn.value = "暫停";
        }
        else
        {
            mv.pause();
            bn.value = "播放";
        }
    }
</script>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章