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

黄舟
Freigeben: 2017-04-15 11:16:56
Original
1668 Leute haben es durchsucht

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

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!

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