如何停止视频播放时，从“滚动底”呢？

Question

我想停止视频滚动它底部的时候。在我的代码中的视频将开始它的顶部滚动播放的时候，却会继续播放，当我滚动到视频的底部。我想停止滚动底部后的视频。

这是代码：

<script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflXFLqZz/www-widgetapi.js" async=""></script>
<script src="https://www.youtube.com/player_api"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '315',
      width: '560',
      playerVars : {
            autoplay : 0
        },
      videoId: 'AgPbGevKWWo'
    });
  }
  
  $(window).scroll(function() {
    $("iframe").each( function() {
        if( $(window).scrollTop() > $(this).offset().top - 500 ) {
            $(this).css('opacity',1);
            player.playVideo();
        } else {
            $(this).css('opacity',1);
            player.stopVideo();
        }
    }); 
});
 
</script>

<div id="ytplayer">
<iframe width="560" height="315" src="https://www.youtube.com/embed/AgPbGevKWWo?autoplay=1&cc_load_policy=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer 1

即使触发命令事件正在::有播放互联网内容没有停止命令时，你应该使用暂停命令，以确保你有前面的步骤正确。

Answer 2

你能解决这个问题的方法之一是把一个事件监听器上滚动来检测，如果视频元素中视。如果是，开始播放视频。否则，停止播放视频。

检查这个线程：detecting if the element inside the viewport

Answer 3

正如其他答案建议，尝试可能：

 $(window).scroll(function() {
    $("iframe").each( function() {
        if($(window).scrollTop() >= $('iframe').offset().top + $(this).innerHeight()) {
            $(this).css('opacity',1);
            player.pauseVideo();
        } else {
            $(this).css('opacity',1);
            player.playVideo();
        }
    }); 
});