时间戳

首页 > 解决方案 > 如果 currentTime 大于 X，则 HTML5 视频运行事件一次

jquery - 如果 currentTime 大于 X，则 HTML5 视频运行事件一次

问题描述

<video>如果 a距离播放结束不到 30 秒，我试图触发一个 jquery 事件。但是，我只希望这个事件运行一次，无论 < 30 之后的位置如何，如果它已经触发，那么不要再这样做了。

我有以下通过 timeupdate 触发的代码，但它会currentTime在播放结束后的 30 秒内反复触发。

如何调整为只运行一次？我不能简单地停止 timeUpdate，因为我用它来显示currentTime视频，所以这会中断。

var video = $('#video');

function func() {
    if ( video[0].currentTime > video[0].duration-30 ) {
        console.log('You are less than 30 seconds from the end!');
    }
}

video.on('timeupdate', function() {
    func();
});

标签： jqueryhtmlvideo

解决方案

为此，您可以使用标志来跟踪事件发生的状态。默认情况下，该标志将为假。currentTime仅当视频距离结束不到 30 秒时才会设置为 true 。

您现在可以在 if 条件中使用此标志，以便它只会触发一次，如下所示：

var $video = $('video');
var $p = $('p');
var eventFired = false;

$video.get(0).volume = 0.2; // just for testing

function func() {
  if (!eventFired && this.currentTime > this.duration - 30) {
    eventFired = true;
    $p.show();
  }
}

$video.on('timeupdate', func);
p { display: none; }
video {
  width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>You are less than 30 seconds from the end!</p>
<video autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>

推荐阅读