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

Facebook like video autoplay and pause

本文关键字：暂停 自动播放 视频 喜欢 Facebook      更新时间：2023-09-26

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

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

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

您可以使用

以下命令实现相同的效果

iframe.contentWindow.postMessage(message, origin);

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

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

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

相关文章：