Facebook любит видео автозапуск и пауза

На моем сайте есть страница с множеством видео. Видео должно воспроизводиться автоматически, когда видео iframe полностью видно в окне просмотра. Когда видео перемещается выше окна просмотра, оно должно приостанавливаться, как мы видим в Facebook.

Примечание: я использую iframe, но нет html5 видео элемент.

Источник

2 ответа

Решение

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

Итак, я использую jquery.inview Плагин для определения, когда iframe находятся в области просмотра.

Также я пользуюсь youtube api контролировать видеофрагмент.

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

Вот полный код (он не работает на этом сайте из-за соображений безопасности, поэтому вы можете посмотреть прямую трансляцию на http://output.jsbin.com/soqezo)

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var players = [];
function onYouTubePlayerAPIReady() {
  $('iframe').each(function() {
    var ifr = $(this),
        player = new YT.Player(ifr[0].id);

    ifr.data('player', player);
    players.push(player);
  });

  initInView();
}

function pausePlayers() {
  for (var i in players) {
    players[i] && players[i].pauseVideo && players[i].pauseVideo();
  }
}

function initInView() {
  $('div').each(function() {
    $(this).on('inview', function(event, isInView) {
      if (isInView) {
        // element is now visible in the viewport
        pausePlayers();
        var player = $(this).find('iframe').data('player');
        if (player) {
          player.playVideo && player.playVideo();
        }
      } else {
        // element has gone out of viewport
        //$(this).find('iframe').data('player').pauseVideo();
      }
    });
  });
}
html, body, div {
  height:100%;
}

div {
  width:100%;
  height:100%;
  background:red;
  margin-bottom:100px;
}

iframe {
  width:100%;
  height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.inview/0.2/jquery.inview.min.js"></script>

<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video1"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video2"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video3"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video4"></iframe>
</div>
<div>
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video5"></iframe>
</div>

Источник

Вы можете добиться того же эффекта, используя

iframe.contentWindow.postMessage(message, origin);

без использования API проигрывателя YouTube. Проверьте ссылку ниже для живой демонстрации:

https://codepen.io/mcakir/pen/JpQpwm

ПРИМЕЧАНИЕ. Прямая демонстрация поддерживает воспроизведение / паузу видеофрагментов iframe с Youtube, vimeo и dailymotion (скоро будет добавлено больше) без использования каких-либо библиотек проигрывателя или SDK.

Источник
Другие вопросы по тегам