视频播放到特定时间后显示按钮

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提供的功能的。我的视频是部署在Intranet上的。

感谢您的帮助，

Answer 1

您可以监听timeupdate元素的<video>事件。可以在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);
  }
});