本文摘自PHP中文网,作者不言,侵删。
这篇文章给大家介绍的内容是关于html5 video如何实现实时监测当前播放时间(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。html:
1 2 3 4 | < video id = "video" controls autoplay = "autoplay" muted>
< source src = "" type = "video/mp4" />
Your browser does not support the video tag.
</ video >
|
js:
1 2 3 4 5 6 7 8 9 10 11 12 13 | //监听播放时间
var video = document.getElementById('video');
//使用事件监听方式捕捉事件
video.addEventListener("timeupdate",function(){
var timeDisplay;
//用秒数来显示当前播放进度
timeDisplay = Math.floor(video.currentTime);
console.log(Math.floor(video.currentTime))
//当视频播放到 4s的时候做处理
if(timeDisplay == 4){
//处理代码
}
},false);
|
相关文章推荐:
阅读剩余部分
相关阅读 >>
HTML5 api浏览器支持情况检测的详情介绍
HTML5如何解决margin-top的塌陷问题(附代码)
HTML5实战-svg的详解
HTML5新特性有哪些
详解HTML5的web存储与cookie的区别
HTML5多媒体audio和video详细介绍(二)
详解HTML5实现橡皮擦的擦除效果的示例代码(图)
什么是HTML5技术
HTML5制作查询页面实例
HTML5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5 video如何实现实时监测当前播放时间(代码)