【问题标题】: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
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-12-05
  • 2018-04-28
  • 2018-11-06
  • 2019-09-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多