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
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!
How to insert audio into ppt
What are the production methods of html5 animation production?
Java-based audio processing methods and practices
The difference between HTML and HTML5
The role of linux terminal commands
What is the file format of mkv?
What is the function of frequency divider
How to represent negative numbers in binary
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
