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中关于音频与视频监听器应用的示例详解的详细内容,更多请关注教程集其它相关文章!
-->您可能感兴趣的文章:
html5如何插入可自动播放的音频(图文)
html5的video(视频)和audio(音频)标签中的属性用法
html5中关于音频与视频监听器应用的示例详解
H5开发视频遇到的问题及解决方案
html5中audio支持音频格式的解决方法
html5播放视频的标签是什么?如何在web页面播放视频呢?(内附实例)
会声会影删除视频声音的方法
HTML5音频与视频问题及解决方法
html5中audio(音频)的分析
关于HTML5中video标签浏览器兼容性增强的方案分享