Maison > Article > interface Web > Explication détaillée du code d'application des auditeurs audio et vidéo HTML5

Explication détaillée du code d'application des auditeurs audio et vidéo HTML5

黄舟original: 2017-04-15 11:16:561619parcourir

Introduction

1. Les éléments

2. Cette application est implémentée àheure de

3. En liant l'auditeur à l'événement ontimeupdate, vous pouvez surveiller la position de lecture de audio et vidéo en réel. temps

Deuxième 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>

Trois résultats en cours

Explication détaillée du code dapplication des auditeurs audio et vidéo HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quelles nouvelles balises sont ajoutées dans HTML5Article suivant：Quelles nouvelles balises sont ajoutées dans HTML5

Articles Liés

Voir plus