javascript - Create a buffering video on seek, pause or play -

i want create buffer gif when user seeks, play or pause video. able succeed bit can'f figure out how on seek. 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">             browser not support 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">             browser not support 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', '');     }); } 

you can set value of poster attribute .gif @ html, remove value @ canplay event, call $(this).attr('poster', '');

<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">       browser not support 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">       browser not support video tag.   </video> </div> 

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