Lecture automatique de la vidéo sur le défilement mais une seule fois

Question

Je suis assez nouveau sur jquery, alors j'ai récupéré ce code à partir d'une autre question de stackoverflow, mais je ne sais pas comment l'adapter.

J'ai une vidéo qui démarre automatiquement lorsqu'elle défile dans la fenêtre. Cependant, si la vidéo est en pause et que l'utilisateur fait défiler même un pixel, la vidéo recommence. Je voudrais que la vidéo reste en pause si elle est encore dans la fenêtre pendant que l'utilisateur défile.

Idéalement, si la vidéo était complètement hors de vue puis de retour, la lecture automatique serait exécutée à nouveau. Cela fonctionnerait également si cette fonction de lecture automatique ne fonctionnait qu'une seule fois et que l'utilisateur pouvait choisir de rejouer la vidéo s'il le souhaitait.

$(document).ready(function() { 
    // Get media - with autoplay disabled (audio or video) 
    var media = $('.autoplay').not("[autoplay='autoplay']"); 
    var tolerancePixel = 40; 

    function checkMedia() { 
     // Get current browser top and bottom 
     var scrollTop = $(window).scrollTop() + tolerancePixel; 
     var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel; 

     media.each(function(index, el) { 
      var yTopMedia = $(this).offset().top; 
      var yBottomMedia = $(this).height() + yTopMedia; 

      if (scrollTop < yBottomMedia && scrollBottom > yTopMedia) 
       $(this).get(0).play(); 
      else 
       $(this).get(0).pause(); 
     }); 
    } 

    $(document).on('scroll', checkMedia); 
}); 

Answer 1

vient marquer l'élément comme joué

if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ 
       if (!$(el).attr('data-played')){ 
       $(el).attr('data-played',1); 
       $(this).get(0).play(); 
       } 
      } else { 
       $(this).get(0).pause(); 
      }