当视频的当前时间大于某个值时执行功能

Question

我想在视频播放到特定时间后隐藏一个 div。以下代码是我认为理论上可行但目前无效的代码。任何解决方案将不胜感激！

 <body>
 <video id="vid" src="somevideo.mp4"></video>
 <div id="box"></div>
 <script>
    function hideDiv() {
  if (vid.currentTime > 5) {
  document.getElementById('box').style.display = 'none';
 }}

 </script>
 </body>

Answer 1

您需要将事件处理程序附加到 timeupdate 事件。

document.querySelector('video').addEventListener('timeupdate', (e) => {
  if (e.currentTarget.currentTime > 5) {
    document.querySelector('#box').style.display = 'none';
  }
});

您可能还想在完成此事件处理程序后将其删除。

另请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event

当视频的当前时间大于某个值时执行功能

perform function when video's current time is greater than a certain value

html

javascript

if-statement

current-time