スクロールでビデオを一度だけ再生する

Question

私はjqueryの新機能ですから、このコードを別のstackoverflowの質問から奪ってしまいましたが、それをどうやって調整するのか分かりません。

私は、ウィンドウにスクロールすると自動再生するビデオを持っています。ただし、ビデオが一時停止していて、ユーザーが1ピクセルでもスクロールすると、ビデオが再び開始されます。ユーザーがスクロールしている間にビデオがウィンドウに残っている場合は、ビデオを一時停止したままにしておきたい。

動画が完全に表示されずに元に戻った場合、自動再生が再び実行されるのが理想的です。この自動再生機能が1回しか実行されておらず、ユーザーが必要に応じてビデオを再生することもできます。

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

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

を果たしたとしてだけで要素をマーク