Detailed explanation of examples of audio and video listener applications in HTML5
Release： 2017-10-25 10:20:34
Original
1961 people have browsed it
Introduction
#1. The
and elements have many listening events, so these events can be bound of listeners.
2. This application implements the listener for the ontimeupdate event 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> Copy after login
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 of this Website
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
Latest Articles by Author
2023-03-15 16:54:01
2023-03-15 12:26:02
2023-03-14 18:58:01
2023-03-14 11:30:01
1970-01-01 08:00:00
2023-03-16 15:20:01
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
