Maison > Article > interface Web > 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:341868parcourir
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