html5中关于音频与视频监听器应用的示例详解-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

html5中关于音频与视频监听器应用的示例详解

一介绍

1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的监听器。

2、本应用实现<video>的ontimeupdate事件的监听器。

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>

登录后复制

三运行结果

以上就是html5中关于音频与视频监听器应用的示例详解的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~