Facebook喜欢视频自动播放和暂停 [英] Facebook like video autoplay and pause

问题描述

在我的网站上有一个包含许多视频的页面.当iframe视频在视口中完全可见时，视频应自动播放.当视频移到视口上方时，该视频应暂停播放，就像我们在Facebook上看到的一样.

In my website there is page with many videos. The videos should autoplay when the iframe video is completely visible in the viewport. When the videos move above the viewport means, the video should pause as we are seeing in facebook.

注意:我使用的是iframe，而不是html5视频元素.

Note: I'm using iframe, but not html5 video element.

推荐答案

尽管SO并不是请求代码的地方，但由于挑战以及需要此想法的其他人，我会回答这个问题.

Although SO is not the place to request code, I will answer that because of challenge and for other people who need the idea.

因此，我正在使用 jquery.inview 插件来检测iframe何时位于视口.

So, I'm using jquery.inview plugin to detect when the iframe are in the viewport.

此外，我正在使用 youtube api 来控制视频的iframe

Also, I'm using youtube api to control the video's iframe.

要解释每一行的工作原理并不容易，因此请阅读代码，如果您有任何疑问，请发表评论.

It's not easy to explain how each line works so read the code and if you will have a question, please comment.

这是完整的代码(由于安全原因，不在此站点上无法正常工作，因此您可以在 http://output.jsbin.com/soqezo )

Here is the full code (It's not working on this site because of security reason so you can see the live in 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>

这篇关于Facebook喜欢视频自动播放和暂停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！