一介紹
1、
2、本應用實作
3、透過ontimeupdate事件綁定監聽器可以即時監控音訊、視訊的播放位置。
二碼
<!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>
三執行結果
以上是html5中關於音訊與視訊監聽器應用的範例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!