search

Home  >  Article  >  Web Front-end  >  Detailed explanation of examples of audio and video listener applications in HTML5

Detailed explanation of examples of audio and video listener applications in HTML5

黄舟
黄舟Original
2017-10-25 10:20:341926browse

Introduction

#1. The b97864c2e0ef2353a16c4d64c7734e92 and 39000f942b2545a5315c57fa3276f220 elements have many listening events, so these events can be bound of listeners.

2. This application implements the listener for the ontimeupdate event of 39000f942b2545a5315c57fa3276f220.

3. By binding the listener to the ontimeupdate event, you can monitor the playback position of audio and video in real time.

Second 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>

Three running results


The above is the detailed content of Detailed explanation of examples of audio and video listener applications in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Weird phenomena of H5 Niuniu game source code front-end developmentNext article：Weird phenomena of H5 Niuniu game source code front-end development

Related articles

See more