通过video元素的currentTime属性获取HTML5视频当前播放时间,单位为秒,支持读取和设置;2. 可监听timeupdate事件实时获取播放进度,适用于更新进度条或时间显示;3. 建议在loadedmetadata或canplay事件后读取currentTime以确保准确性;4. 可直接赋值currentTime实现跳转播放,如video.currentTime = 30。

在JavaScript中获取HTML5视频当前播放时间,可以通过访问video元素的currentTime属性实现。这个属性返回视频当前播放的秒数,支持读取和设置。
获取视频当前时间(currentTime)
要获取视频当前播放的时间点,使用currentTime属性即可:
const video = document.getElementById('myVideo');console.log(video.currentTime); // 输出当前播放时间(单位:秒)
其中myVideo是标签的ID。该值是一个浮点数,例如12.345表示12秒345毫秒。
实时监听播放时间变化
如果需要持续获取播放进度,可以监听timeupdate事件:
立即学习“Java免费学习笔记(深入)”;
模力视频
模力视频 – AIGC视频制作平台 | AI剪辑 | 云剪辑 | 海量模板
51 查看详情
const video = document.getElementById('myVideo');video.addEventListener('timeupdate', function() { console.log('当前时间:' + video.currentTime + ' 秒');});
这个事件在播放过程中频繁触发,适合用于更新进度条或时间显示。
注意事项
确保视频已加载元数据:在视频未加载完成时读取currentTime可能不准确。建议在loadedmetadata或canplay事件后操作:
video.addEventListener('loadedmetadata', function() { console.log('视频时长:' + video.duration + ' 秒'); console.log('当前时间:' + video.currentTime + ' 秒');});
另外,若想设置播放时间(如跳转到指定位置),可直接赋值:video.currentTime = 30; 表示跳转到第30秒。
基本上就这些,使用currentTime就能轻松掌握视频播放进度。
以上就是JavaScript怎样获取HTML视频当前时间_JS获取HTML视频currentTime属性的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/610063.html
微信扫一扫
支付宝扫一扫