suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung des Anwendungscodes von HTML5-Audio- und Video-Listenern

Detaillierte Erläuterung des Anwendungscodes von HTML5-Audio- und Video-Listenern

黄舟
黄舟Original
2017-04-15 11:16:561663Durchsuche

Einführung

1. Die Elemente

2. Diese Anwendung implementiert Zeit von

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

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

Detaillierte Erläuterung des Anwendungscodes von HTML5-Audio- und Video-Listenern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Anwendungscodes von HTML5-Audio- und Video-Listenern. 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：Welche neuen Tags werden in HTML5 hinzugefügt?Nächster Artikel：Welche neuen Tags werden in HTML5 hinzugefügt?

In Verbindung stehende Artikel

Mehr sehen