HTML5 Видеозвонки onpause и onplay при поиске - PullRequest
Новая
       141

HTML5 Видеозвонки onpause и onplay при поиске

0 голосов
/ 09 мая 2020

Возьмем, к примеру, эту страницу: 

<!doctype html>

<html>
    <body>
        <video id="video" controls width="500" muted="muted" >   
            <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1920_18MG.mp4" type="video/mp4"/>  
        </video>
        <script type="text/javascript">
            var vid=document.getElementById('video')

            vid.onpause=function(){
                console.log('on pause executed')
            }

            vid.onplay=function(){
                console.log('on play executed')
            }
        </script>
    </body>
</html>

Если я ищу во время воспроизведения видео, они оба отображаются в консоли. Ни один из них не отображается в консоли, если я ищу, пока видео приостановлено. Как я могу сделать так, чтобы эти функции вызывались только тогда, когда пользователь явно приостанавливает / воспроизводит видео?

1 Ответ

0 голосов
/ 10 мая 2020

Здесь я добавил 2 вещи.

  1. Добавлены события onseeking и onseeked с флагом isSeeking.

    • Это предотвратит запуск onplay и onpause, пока вы действительно ищете

  2. Добавлен тайм-аут в onpause событии

    • Это хак для предотвращения onpause при запуске поиска 

<!DOCTYPE html>

<html>

<body>
  <video id="video" controls width="500" muted="muted">
      <source
        src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_1920_18MG.mp4"
        type="video/mp4"
      />
    </video>
  <script type="text/javascript">
    var vid = document.getElementById('video');
    var isSeeking = false;
    var idSeekTest;
    var SEEKEVENT_TIMEOUT = 30;

    vid.onpause = function() {

      idSeekTest = setTimeout(function() {
        if (!isSeeking) {
          console.log('on pause executed');
        }
      }, SEEKEVENT_TIMEOUT);
    }

    vid.onplay = function() {
      idSeekTest = setTimeout(function() {
        if (!isSeeking) {
          console.log('on play executed');
        }
      }, SEEKEVENT_TIMEOUT);

    }

    vid.onseeking = function() {
      isSeeking = true;
      clearTimeout(idSeekTest);
      console.log('seeking');
    }
    vid.onseeked = function() {
      isSeeking = false;
      console.log('seeked');
    }
  </script>
</body>

</html>
...