You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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

火山引擎 最新活动