2
votes

Comment arrêter la lecture de la vidéo, lorsque "défilement en bas" de celui-ci?

Je souhaite arrêter la vidéo lorsque vous la faites défiler vers le bas. Dans mon code, la lecture de la vidéo commencera lorsqu'elle défilera à partir du haut de celle-ci, mais elle continuera à jouer lorsque je défilerai vers le bas de la vidéo. Je veux arrêter la vidéo après avoir défilé vers le bas.

Voici le code:

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

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

javascript html css

0 commentaires

3 Réponses :

0
votes

Une façon de résoudre ce problème est de mettre un écouteur d'événements sur le défilement pour détecter si l'élément vidéo est dans la fenêtre. Si tel est le cas, lancez la lecture de la vidéo. Sinon, arrêtez la lecture de la vidéo.

Vérifiez ce fil de discussion: détecter si l'élément à l'intérieur de la fenêtre

0 commentaires

1
votes

Même si l'événement de commande de déclenchement fonctionne: il n'y a pas de commande stop pour la lecture de contenu Internet, vous devez utiliser la commande pause pour vous assurer que vous avez l'étape précédente à droite.

0 commentaires

0
votes

Comme suggéré par les autres réponses, essayez peut-être:

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

0 commentaires