在滚动上自动播放视频，但只有一次

Question

我对jquery很新，所以我从另一个stackoverflow问题获取此代码，但我不知道如何适应它。

我有一个视频，当它滚动到窗口时自动播放。但是，如果视频暂停并且用户滚动一个像素，则视频会再次启动。如果视频在用户滚动时仍处于窗口中，我希望视频保持暂停状态。

理想情况下，如果视频完全离开视图然后重新进入，自动播放会再次运行。如果此自动播放功能只运行一次，并且用户可以选择再次播放视频（如果他们想要），它也可以工作。

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