一 介绍
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>
三 运行结果
相关推荐
教程名称: 【动力节点】Javaweb开发视频教程之监听器 动力节点推出的Java视频教程包含两大部分内容:第一部分为监听器相关设计模式的详解。其中包括观察者设计模式、监听器设计模式。第二部分为监听器用法。详细...
主要介绍了Java设计模式之监听器模式,结合实例形式较为详细的分析了java设计模式中监听器模式的概念、原理及相关实现与使用技巧,需要的朋友可以参考下
xml文件及文档讲解过滤器与监听器的配置,实际应用等,以及二者的区别和使用时应该注意的地方
过滤器和监听器
audio-listener-html HTML中的音频监听器
Web页面的过滤与监听 了解Filter基本概念和适用场合 掌握使用Filter的基本步骤 会定义和使用Filter 掌握全局对象监听器的使用和应用 掌握会话对象监听器的使用和应用
junit5 dependency 所有jar包,包括监听器收集测试结果
JSP+servlet+javabean学习 里面有PDF文件对该章节的详细讲解,培训老师才讲的到的,非常详细......资源内容如下: JavaWeb02-request与response.rar JavaWeb03-会话跟踪cookie与...JavaWeb13-过滤器与监听器.rar
监听器软件APP官网模板是一款蓝色大气html5应用下载专题页面模板。_html网站模板_网页源码移动端前端_H5模板.rar
java监听器和过滤器详解,详细而且简单,保证能看懂
servlet过滤器和监听器,servlet过滤器和监听器课件,servlet过滤器和监听器PPT
配置Oracle监听器 配置Oracle监听器
主要给大家介绍了关于java监听器实现和原理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用java具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
jsp/servlet中过滤器和监听器的区别,适用于想学习jsp/servlet并想了解及掌握过滤器和监听器来开发的同学
过滤器和监听器的简要介绍及实际场景中的运用
NULL 博文链接:https://crazyhacker.iteye.com/blog/662587
快速关闭oracle和监听器,节约资源!
web监听器代码web监听器代码web监听器代码web监听器代码web监听器代码web监听器代码
基于 RBAC与监听器机制设计作业管理软件
当范围对象的状态发生变化的时候,服务器自动调用监听器对象中的方法。 例如:创建一个“人”类Class Person 人拥有吃的方法public void eat(){},我们的目的是,在这个人吃之前要提醒他洗手,所以我们要...