HTML5ビデオをスクロールして再生し、完了するまで再生して一度だけ再生する

Question

ビデオを再生するポイントまでスクロールしてからもう一度再生しないと、ビデオを再生しようとしています。

私はそれをしたいです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 
    }); 

Answer 1

オンビデオ終了イベントmake src null Fiddle。

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