search

Home >Web Front-end >H5 Tutorial >Detailed explanation of the application code of HTML5 audio and video listeners

Detailed explanation of the application code of HTML5 audio and video listeners

黄舟
黄舟Original
2017-04-15 11:16:561689browse

1 Introduction

1. There are many monitors for the

2. This application implements ontime of

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

Detailed explanation of the application code of HTML5 audio and video listeners

The above is the detailed content of Detailed explanation of the application code of HTML5 audio and video listeners. 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：What new tags are added in Html5Next article：What new tags are added in Html5

Related articles

See more