recherche

Maison >interface Web >Tutoriel H5 >Explication détaillée d'exemples d'applications d'écoute audio et vidéo en HTML5

Explication détaillée d'exemples d'applications d'écoute audio et vidéo en HTML5

黄舟
黄舟original
2017-10-25 10:20:341962parcourir

Introduction

1 Les éléments b97864c2e0ef2353a16c4d64c7734e92 auditeurs.

2. Cette application implémente l'écouteur pour l'événement ontimeupdate de 39000f942b2545a5315c57fa3276f220.

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

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


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：Phénomènes étranges du développement frontal du code source du jeu H5 NiuniuArticle suivant：Phénomènes étranges du développement frontal du code source du jeu H5 Niuniu

Articles Liés

Voir plus