html5中关于音频与视频监听器应用的示例详解

互联网 17-10-25

一介绍

1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的监听器。

2、本应用实现<video>的ontimeupdate事件的监听器。

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>

三运行结果