播放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视频时滚动到，然后播放，直到完成，只播放一次

回答

相关问题