html5——多媒體支持（video/audio）

發(fā)布時間：2020-06-24 10:17:17 來源：網(wǎng)絡(luò) 閱讀：542 作者：叫獸黍黍欄目：移動開發(fā)

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

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

audio video支持的屬性

屬性名	說明
src	指定播放視頻音頻的URL地址
autoplay	音頻視頻加載完成后會自動播放
controls	顯示播放控制條
loop	重復(fù)播放
preload	預(yù)先加載
poster	播放之前，該元素將會顯示該屬性所指定的圖片
width	視頻播放器的寬度
height	視頻播放器的寬度

HTMLAudioElement 與HTMLAudioElement的屬性

屬性名	說明
currentTime	返回播放器當(dāng)前所處的時間點
paused	true表示暫停
played	播放狀態(tài)
startTime	返回播放器播放音頻視頻的開始時間，通常返回0

audio、video元素所持有的事件

事件	說明
onpause	暫停觸發(fā)該事件
onplaying	正在播放觸發(fā)該事件
onerror	加載數(shù)據(jù)出錯是觸發(fā)該事件
onplay	開始播放時觸發(fā)該事件

<!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>
<h3> 視頻播放 </h3>
<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事件綁定監(jiān)聽器
    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>

向AI問一下細(xì)節(jié)

html5——多媒體支持（video/audio）

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽