一 介绍
1、
2、本应用实现
3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。
二 代码
<!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>三 运行结果
Atas ialah kandungan terperinci HTML5的音频和视频监听器的应用代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana untuk memasukkan audio ke dalam ppt
Apakah kaedah penghasilan penghasilan animasi html5?
Kaedah dan amalan pemprosesan audio berasaskan Java
Perbezaan antara HTML dan HTML5
Peranan sistem pengendalian linux
Perbezaan antara rantau semasa dan julat terpakai
Apakah jenis fail
Bagaimana untuk menyelesaikan masalah yang kod js tidak boleh dijalankan selepas pemformatan
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
