Как определить, был ли Vimeo-плеер приостановлен пользователем ИЛИ путем прокрутки из области просмотра - PullRequest
Новая
       10

Как определить, был ли Vimeo-плеер приостановлен пользователем ИЛИ путем прокрутки из области просмотра

0 голосов
/ 15 ноября 2018

У меня есть одно видео на веб-сайте, которое автоматически воспроизводится при прокрутке в область просмотра и приостанавливается при выходе из области просмотра.Видео отключено, поэтому оно также работает на мобильном телефоне.

Я использую Vimeo API для воспроизведения и приостановки видео, а некоторые JS для определения, как при загрузке, так и при прокрутке, находится ли видео в области просмотра.

Это все работаетотлично, за исключением того, что у пользователя есть возможность вручную приостанавливать видео через обычную панель воспроизведения Vimeo, а также увеличивать громкость (музыкальная звуковая дорожка видео не важна для его просмотра, но некоторые пользователи могут захотеть ее услышать).

Проблема в том, что если пользователь вручную приостанавливает видео, а затем начинает прокрутку, сценарий обнаруживает, что видео находится в области просмотра, и начинает его воспроизведение снова, по крайней мере до тех пор, пока видео не покинет область просмотра.

Это нежелательно, и особенно нежелательно, если пользователь увеличил громкость, а затем приостановил воспроизведение видео, потому что теперь внезапно он услышит воспроизведение видео при прокрутке вниз.

Есть ли способ определить, взаимодействовал ли пользователь с проигрывателем Vimeo (чтобы приостановить его) по сравнению с тем, когда он автоматически приостанавливался от прокрутки из области просмотра?Я не видел его при просмотре документации по API Vimeo (https://github.com/vimeo/player.js).

Если это возможно, то я бы просто добавил условное утверждение, которое говорит, что не воспроизводить видео при прокрутке в окне просмотра, еслив данный момент пользователь приостановлен.

Или, возможно, есть другой способ адресации? Единственное другое требование - решение должно быть чистым / ванильным JS.

Текущий код: 

<div id="video-box">
  <iframe id="i_video" src="https://player.vimeo.com/video/123456789?loop=1&amp;muted=1&amp;title=0&amp;byline=0&amp;portrait=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="530" height="298" frameborder="0"></iframe>
</div>

<script src="https://player.vimeo.com/api/player.js"></script>

<script>
  var iframe = document.querySelector('iframe');
  var player = new Vimeo.Player(iframe);

  function vimeoPlay(){
    player.play()
  };

  function vimeoPause(){
    player.pause()
  };

  var dv = document.getElementById('video-box');
  var v = document.getElementById('i_video');

  function isAnyPartOfElementInViewport(dv) {
    const rect = dv.getBoundingClientRect();
    const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    if (isAnyPartOfElementInViewport(dv)) {
      vimeoPlay();
    }
    else {
      vimeoPause();
    }
  }, false);

  window.addEventListener('scroll', function (event) {

  if (isAnyPartOfElementInViewport(dv)) {
    vimeoPlay();
  }
  else {
    vimeoPause();
  }
  }, false);
  </script>

11/15/18 Отредактировано для добавления:

Внутри, если 

(isAnyPartOfElementInViewport(dv)) {,

, в настоящее время есть только 

vimeoPlay(),

, которыйозначает, что в окне просмотра независимо от того, нажал ли пользователь вручную на паузу на проигрывателе Vimeo, как только они начнут прокручивать, видео снова начнет воспроизводиться.

Что бы вы предложили для внутреннего условного выражения, размещаемого вокруг vimeoPlay() так, чтобы он воспроизводился только в том случае, если пользователь не приостановил проигрыватель вручную?

Я не могу просто проверить, не приостановлено ли видео с помощью API getPaused (), потому что я не верюэто различает, было ли это приостановлено автоматически из-за того, что это было вне области просмотра или вручную, нажимая кнопку паузы.

Я думаю, если бы был способ спросить "было ли это видео приостановлено во время просмотра", а затем воспроизводить видео, только если это условие НЕ соответствует действительности, это может помочь, но я не уверен, как написатьчто.

1 Ответ

0 голосов
/ 16 ноября 2018

Вот решение,

Когда пользователь приостанавливает видео, согласно Vimeo GitHub Документы

Когда видео приостановлено пользователем !.

Решение: Добавьте это в свой файл JS 

player.on('pause', function() {
    console.log('paused the User!');
});

Когда видео останавливается с помощью прокрутки

Решение: 

window.addEventListener('scroll', function(event) {

    if (isAnyPartOfElementInViewport(dv)) {
        vimeoPlay();
    } else {
        console.log('paused by scrolling');
        vimeoPause();
    }
}, false);

Обновление: в комплекте Обновлен фиддлер

Вот рабочая jsFiddle

Надеюсь, это поможет!

...