Heim > Web-Frontend > H5-Tutorial > Ausführliche Erläuterung von Beispielen für Audio- und Video-Listener-Anwendungen in HTML5

Ausführliche Erläuterung von Beispielen für Audio- und Video-Listener-Anwendungen in HTML5

黄舟
Freigeben: 2017-10-25 10:20:34
Original
1942 Leute haben es durchsucht

Einführung

1 Die Elemente

2. Diese Anwendung implementiert den Listener für das ontimeupdate-Ereignis von

3. Durch die Bindung eines Listeners an das ontimeupdate-Ereignis können Sie die Wiedergabeposition von Audio und Video in Echtzeit überwachen.

Zweiter Code


<!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>
Nach dem Login kopieren

Drei laufende Ergebnisse


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für Audio- und Video-Listener-Anwendungen in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage