Erstellen eines Puffer-Videos beim Suchen, Pausieren oder Abspielen

Question

Ich möchte ein Puffer-GIF erstellen, wenn der Benutzer das Video sucht, spielt oder pausiert. Ich bin in der Lage, ein bisschen erfolgreich zu sein, aber ich kann herausfinden, wie man das auf der Suche macht. Das ist mein Code.

HTML:

<div class="row text-center"> 
     <video width="320" height="240" controls id="video1" onplay="buffer(this.id)" poster="" class=""> 
      <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
    </div> 
    <br/> 
    <div class="row text-center"> 
     <video width="320" height="240" controls id="video2" onplay="buffer(this.id)" poster="" class=""> 
      <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"> 
      Your browser does not support the video tag. 
     </video> 
    </div> 

CSS:

video.loading { 
     background: black url("img/loader_old.gif") center center no-repeat; 
     z-index: 300000 !important; 
    } 

JQUERY:

function buffer(id){ 
    $('#'+id).on('loadstart', function (event) { 
     $(this).addClass('loading'); 
    }); 
    $('#'+id).on('canplay', function (event) { 
     $(this).removeClass('loading'); 
     $(this).attr('poster', ''); 
    }); 
} 

Answer 1

Sie den Wert von poster Attribut .gif bei html einstellen, entfernen Wert bei canplay Ereignis, wo Sieanrufen

<div class="row text-center"> 
    <video width="320" height="240" controls id="video1" poster="img/loader_old.gif" class=""> 
    <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 
</div> 
<br/> 
<div class="row text-center"> 
    <video width="320" height="240" controls id="video2" poster="img/loader_old.gif" class=""> 
    <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"> 
     Your browser does not support the video tag. 
    </video> 
</div> 

$(function() { 
    $("video").each(function() { 
    $(this).on("canplay", function (event) { 
     $(this).attr("poster", ""); 
    }) 
    }) 
});