如何在video.js中实现视频播放10秒后自动暂停?
实现Video.js视频播放10秒后自动暂停
嘿,我来帮你搞定这个需求!你的思路其实已经走对了——用Video.js监听timeupdate事件来检查播放时长,只是代码没写完,我帮你补全还加了些实用的优化细节:
完整的JavaScript代码
var pausetime = 10; var myPlayer = videojs('video_kgvid_0'); // 封装暂停检查的逻辑函数 function checkAndPause() { if (myPlayer.currentTime() >= pausetime) { myPlayer.pause(); // 暂停后移除事件监听,避免后续重复触发检查,节省性能 myPlayer.off('timeupdate', checkAndPause); } } // 绑定timeupdate事件,开始监听播放时长 myPlayer.on('timeupdate', checkAndPause); // 可选优化:用户重新播放时,重新绑定监听 myPlayer.on('play', function() { myPlayer.on('timeupdate', checkAndPause); });
代码细节说明
- 把暂停逻辑单独封装成函数,既清晰又方便后续移除事件监听
- 暂停后调用
off方法移除timeupdate监听:不然每次视频时间更新都会跑一遍检查,完全没必要 - 额外添加
play事件监听:如果用户暂停后又手动点击播放,这段代码会重新绑定timeupdate监听,确保再次播放到10秒时依然会自动暂停
你的HTML代码无需修改
<video id="video_kgvid_0" controls preload="metadata" poster="video poster url" width="640" height="267" class="fitvidsignore video-js kg-video-js-skin"> <source src="video url" type="video/mp4" data-res="534p"> </video>
⚠️ 注意:要确保这段JS代码是在Video.js库加载完成后执行的,比如把代码放在页面底部,或者用DOMContentLoaded事件包裹,这样才能保证正确获取到播放器实例。
内容的提问来源于stack exchange,提问作者Noobie




