播放HTML5視頻時滾動到，然後播放，直到完成，只播放一次

我試圖播放視頻到完成後，用戶滾動到點開始視頻，然後不再播放它。播放HTML5視頻時滾動到，然後播放，直到完成，只播放一次

我想讓它1）開始播放，一旦他們滾動2）播放視頻完成一旦開始播放，和3）只播放一次，然後回退到海報圖像。我怎麼能在jQuery中做到這一點？

https://jsfiddle.net/tca0nyqs/ - 在這個小提琴中，每當用戶滾動時它都會重新啓動。

HTML

<video id="about-video" preload="auto" poster="images/about-default.png"> 
<source src="images/about-work.mp4" type="video/mp4"> 
</video>

jQuery的

$(document).ready(function() { 
    // Get media - with autoplay disabled (audio or video) 
    var media = $('#about-video').not("[autoplay='autoplay']"); 
    var tolerancePixel = 300; 
    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){ //view explaination in `In brief` section above 
       $(this).get(0).play(); 
      } else { 
       $(this).get(0).pause(); 
      } 
      }); 
     //} 
     } 
     $(document).on('scroll', checkMedia); 
    });

我應該以某種方式使用它來檢查，如果視頻已被播放一次？

$('#about-video').on('ended',function(){ 
    // code 
    });

來源

2016-09-20 evan

使用循環屬性 – Chetan

@Chetan我編輯的問題更清楚，但不試圖使其循環。我希望它只能播放一次直到完成（即使用戶滾動過去，因此不再處於視圖中）。 – evan

更新：我相信我找到了重複/工作答案在這裏：http://stackoverflow.com/a/33116544/2084793 – evan

視頻結束事件make src null Fiddle。

$('#about-video').on('ended',function(){ 
    $(this).attr('src',''); 
    });

來源

2016-09-20 05:08:28 Chetan

播放HTML5視頻時滾動到，然後播放，直到完成，只播放一次

回答

相關問題