Facebook视频自动播放和暂停

Question

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

注意：我使用iframe，而不是html5视频元素。

- yasarui

---

当你说“iframe，而不是html5”时，是指YouTube吗？ - Mosh Feu

仅限YouTube视频。 - yasarui

Answer 1

您可以使用相同的方法来实现这个效果

iframe.contentWindow.postMessage(message, origin);

不使用YouTube的Player API。 查看下面的链接以获取实时演示：

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

注意：该演示支持播放/暂停来自Youtube、vimeo和dailymotion的iframe视频（更多即将加入），无需使用任何播放器库或SDK。

- Must Ckr

---

S3中存储的视频似乎没有响应，您有什么建议吗？ - aug2uag

@aug2uag，我在这里提出的方法仅适用于通过 iframe（嵌入）从流行的视频提供商加载视频。我不明白你所说的“存储在 S3 中的视频”是什么意思。 - Must Ckr

是的，你说得对，我指的是亚马逊网络服务的简单存储服务（S3）；如果我将iframe的源替换为指向存储在S3中的mp4文件，则它不会响应其他文件所具有的30％开/70％关的功能。 - aug2uag

Answer 2

尽管 SO 不是请求代码的地方，但我会回答这个问题，因为它很具有挑战性，而且其他需要想法的人也可以受益。

所以，我正在使用 jquery.inview 插件来检测 iframe 何时出现在视口中。

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

不容易解释每一行代码是如何工作的，所以请阅读代码，如果您有问题，请评论。

以下是完整的代码（由于安全原因，它在该网站上不起作用，所以您可以在 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>

- Mosh Feu

---

为什么页面刚开始时它会暂停，直到我点击一下才自动播放？ - Sourabh Semalty