Heim > Artikel > Web-Frontend > 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

黄舟Original: 2017-10-25 10:20:341907Durchsuche

Einführung

1 Die Elemente 4218491fec31d29458f32c3ffee1002b haben viele Hörereignisse, sodass diese Ereignisse verknüpft werden können Zuhörer.

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

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>

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!

Stellungnahme：

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

Vorheriger Artikel：Seltsame Phänomene bei der Front-End-Entwicklung des H5 Niuniu-SpielquellcodesNächster Artikel：Seltsame Phänomene bei der Front-End-Entwicklung des H5 Niuniu-Spielquellcodes

In Verbindung stehende Artikel

Mehr sehen