本文摘自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 canvas绘制文字
HTML5表单相关元素和属性
HTML5设置视频背景的方法介绍
HTML5实践-三步实现响应式设计的详细介绍
用h5的canvas做恐怖动画
关于使用HTML5进行svg矢量图形绘制的代码
为什么现在HTML5的优势越来越大
10个HTML5代码片段可在网站制作中随时可用详解
HTML5 dialog使用详解
断点续传原理是什么?怎么利用HTML5实现文件断点续传
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html5 video如何实现实时监测当前播放时间(代码)