Media API и слушатель

Question

Есть видео

<video id='video' src = '/'> </video>

Есть слушатель

<script>
var videoEl = document.getElementsByTagName('video')[0],
function sendSeeked() {
    console.log('Сообщение');
}
videoEl.addEventListener('seeked', sendSeeked, false);
</script>

Когда я перематываю видео мышкой - всё работает, в консоль выводится сообщение. Но когда изменяю время через videoEl.currentTime = 30;, то в консоль тоже выводится сообщение, а мне это не нужно. Как это можно реализовать?

Я пытался отключить слушатель, и после изменения времени снова включить его:

        videoEl.removeEventListener('seeked', sendSeeked);
        videoEl.currentTime = 30;
        videoEl.addEventListener('seeked', sendSeeked, false);

Но такой способ не сработал, и сообщение по прежнему отправляется в консоль.

Answer 1

Можете завести себе переменную вместо удаления события.

const $video = document.querySelector('video');
const $button = document.querySelector('button');

let fromJS = false;

$video.addEventListener('seeked', e => {
  console.log(fromJS ? `Скрипт` : `Пользователь`);
  fromJS = false;
});


$button.addEventListener('click', e => {
  fromJS = true;
  $video.currentTime = 3;
});

<div>
  <button type='button'>Seek</button>
</div>

<video controls="controls" preload='none' poster="https://assets.codepen.io/32795/poster.png">
    <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4' />
    <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm' />
    <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg' />
</video>

БЛОГ НА HUSL

Media API и слушатель

Ответы (1 шт):