Facebook喜欢视频自动播放和暂停答案

【问题标题】：Facebook like video autoplay and pauseFacebook喜欢视频自动播放和暂停
【发布时间】：2016-02-03 10:43:36
【问题描述】：

在我的网站上有很多视频的页面。当 iframe 视频在视口中完全可见时，视频应自动播放。当视频移到视口上方时，视频应该暂停，就像我们在 facebook 中看到的那样。

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

【问题讨论】：

当你说 iframe, but not html5 时是指 youtube 吗？
仅限 youtube 视频

标签： javascript video iframe

【解决方案1】：

虽然 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>

【讨论】：

为什么它在页面第一次启动时暂停它直到我点击一个才自动播放

【解决方案2】：

你可以使用

达到同样的效果

iframe.contentWindow.postMessage(message, origin);

不使用 YouTube 的 Player API。查看以下链接以获取现场演示：

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

注意：现场演示支持播放/暂停来自 Youtube、vimeo 和 dailymotion （更多内容将很快添加） 的 iframe 视频，而无需使用任何播放器的库或 SDK p>

【讨论】：

存储在 S3 中的视频似乎没有响应，您有什么建议吗？
@aug2uag 我在这里建议的方法仅适用于通过 iframe（嵌入）从流行的视频提供商加载视频。我不明白您所说的“存储在 S3 中的视频”是什么意思
是的，你是对的，我的意思是亚马逊网络服务简单存储服务 (S3)；如果我将 iframe 的源替换为指向存储在 S3 中的 mp4 文件，则它不会响应其他人的 30%-on/70%-off