本文摘自PHP中文网,作者黄舟,侵删。
一 介绍1、<audio>和<video>元素有不少监听事件,因此可以绑定这些事件的监听器。
2、本应用实现<video>的ontimeupdate事件的监听器。
3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。
二 代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!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中返回音频/视频是否已暂停的属性paused
详解HTML5头部<meta>标签的常用信息小结
HTML5与传统html的区别,有哪些新增的和废除的元素?
HTML5中设置或返回音频/视频是否默认静音的属性defaultmuted
HTML5与flash比较的详细介绍
详解HTML5的限制验证
svg和css3实现环形渐变进度条的代码示例
HTML5的canvas元素有什么作用?<canvas>的简单使用
HTML5 canvas常用属性方法(介绍)
如何自动获取HTML5的data-*属性示例代码详解
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » HTML5的音频和视频监听器的应用代码详解