HTML5的音频和视频监听器应用
2017-11-22 10:32
459 查看
一 介绍
1、<audio>和<video>元素有不少监听事件,因此可以绑定这些事件的监听器。
2、本应用实现<video>的ontimeupdate事件的监听器。
3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。
二 代码
三 运行结果
![](http://dl2.iteye.com/upload/attachment/0124/3153/169deea2-6131-366e-ab79-c5aa03680096.png)
![](http://dl2.iteye.com/upload/attachment/0124/3153/169deea2-6131-366e-ab79-c5aa03680096-thumb.png)
大小: 117.5 KB
查看图片附件
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>
三 运行结果
![](http://dl2.iteye.com/upload/attachment/0124/3153/169deea2-6131-366e-ab79-c5aa03680096.png)
![](http://dl2.iteye.com/upload/attachment/0124/3153/169deea2-6131-366e-ab79-c5aa03680096-thumb.png)
大小: 117.5 KB
查看图片附件
相关文章推荐
- HTML5的音频和视频的巧用
- HTML5程序设计 音频和视频
- HTML5音频,视频播放
- 【面向HTML5--视频和音频】
- html5 [2] ~之 音频视频
- HTML5音频和视频
- HTML5的第二天——视频,音频
- html5 音频和视频(audio And video)
- HTML5 添加视频和音频(响应式视频)
- HTML5视频支持 音频支持
- HTML5音频和视频播放
- 【HTML5学习笔记】9:音频和视频的嵌入
- avs 中国音视频标准DRA 中音频标准及应用
- 在 Windows Server 2008 (R2)上的IE9不支持HTML5 视频与音频解决办法
- 跨浏览器兼容的HTML5视频音频播放器
- 低版本IE6/7/8浏览器中使用HTML5的audio和video标签播放视频音频
- html5 笔记6 — 视频、音频
- HTML5学习笔记第一节(智能提示和视频音频标签)
- HTML5视频、音频案例
- Html5常用语义标签、拖拽功能、音频、视频总结