溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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>
<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事件綁定監聽器
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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
