在滾動上自動播放視頻，但只有一次

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