在视频到达视频的特定时间后显示一个按钮

Question

我有一个带有链接到另一个页面的按钮的视频页面。我最初需要隐藏按钮，但仅在视频完成前 5 秒时才显示按钮。 它采用标准 HTML 代码，如下所示。

<video controls preload=metadata width=1280 height=720>
<source src='media/video.mp4' type=‘video/mp4'>
<p>Please use a modern browser to view this video.</p>
</video>

如何使用 Javascript 实现这一点？我能找到的所有例子都是关于 youtube 视频和使用 Youtube 提供的功能的。我的是内网部署的视频。

感谢您的帮助，

Answer 1

你可以监听<video>元素的timeupdate事件。它的文档可以在here 找到。 代码基本上如下所示：

const TIME_TO_SHOW_BUTTON = 60; // 60 seconds;
const video = document.getElementById('video');

video.addEventListener('timeupdate', function showButton() {
  if (video.currentTime > TIME_TO_SHOW_BUTTON) {
    // your logic to show the button
    video.removeEventListener('timeupdate', showButton);
  }
});