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

即使trigger命令事件正在运行：：没有用于播放Internet内容的 stop 命令，您也应该使用 pause 命令来确保您已经上一步是正确的。

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();
        }
    }); 
});

如何在“滚动到底部”时停止视频播放？

3 个答案: