javascript - 滚动到时播放 HTML5 视频，然后播放至完成且仅播放一次

Question

我试图在用户滚动到开始视频的点后播放视频，然后不再播放。

我希望它 1.) 在滚动后开始播放 2.) 在视频开始播放后将其播放完整，以及 3.) 仅播放一次，然后回退到海报图像。我怎样才能在 jQuery 中做到这一点？

https://jsfiddle.net/tca0nyqs/ - 在此 fiddle 中，每次用户滚动时它都会重新启动。

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

Answer 1

视频结束事件时使 src null Fiddle .

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