Video.js播放器「跳过回顾」按钮自动隐藏功能的纯JavaScript实现求助

没问题！咱们来完善这个类似Netflix的跳过回顾按钮功能。你已经搞定了点击跳转隐藏的部分，现在只需要监听视频的播放时间变化，当时间走到30秒时自动隐藏按钮就行。

这里是完整的纯JavaScript实现代码，我还做了一点点优化，把重复的隐藏逻辑封装成了函数，避免冗余：

var player = videojs("videojs-sprite-thumbnails-player");
// 确保能正确获取到跳过按钮元素，如果你的选择器不同可以调整
var ignoreButtonDom = document.querySelector(".vjs-st-button");

// 第一部分：用户点击按钮跳过回顾
ignoreButtonDom.onclick = function() {
  player.currentTime(30);
  hideIgnoreButton();
};

// 封装隐藏按钮的通用函数，点击和自动隐藏都能用
function hideIgnoreButton() {
  var divsToHide = document.getElementsByClassName("vjs-st-button");
  for(var i = 0; i < divsToHide.length; i++) {
    divsToHide[i].style.display = "none";
  }
  // 隐藏后移除时间监听，避免不必要的性能消耗
  player.off('timeupdate', checkRecapEnd);
}

// 检查回顾是否结束的函数
function checkRecapEnd() {
  // 当播放时间达到或超过30秒时，自动隐藏按钮
  if (player.currentTime() >= 30) {
    hideIgnoreButton();
  }
}

// 监听视频播放时间的更新事件，实时检查进度
player.on('timeupdate', checkRecapEnd);

关键逻辑说明： #

• 用player.on('timeupdate', ...)监听视频的时间变化事件，这个事件会在视频播放时间更新时频繁触发，刚好适合我们检查进度。
• 把隐藏按钮的代码抽成hideIgnoreButton函数，不管是用户点击还是自动触发，都能复用这段逻辑，同时在隐藏后移除timeupdate监听，避免后续不必要的事件触发。
• 确保ignoreButtonDom能正确获取到你的按钮元素，如果之前的变量获取方式有问题，用document.querySelector结合你的按钮类名来获取更可靠。

内容的提问来源于stack exchange，提问作者Hge Tech