HTML5 Видео запускает событие один раз, если currentTime больше X

Question

Я пытаюсь вызвать событие jquery, если <video> ближе, чем 30 секунд от конца воспроизведения. Тем не менее, я хочу, чтобы это событие запускалось один раз, независимо от позиции после <30, если оно уже сработало, то не повторяйте это снова. </p>

У меня есть приведенный ниже код, который срабатывает через 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();
});

Answer 1

Для этого вы можете использовать флаг, чтобы отслеживать состояние происходящего события. По умолчанию флаг будет ложным. Значение будет установлено в true только тогда, когда currentTime видео менее 30 секунд от конца.

Теперь вы можете использовать этот флаг в вашем условии 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>