Buffering not stop after modal hide

Question

when i start playing video and pause .Or hide model buffering not stop.
My model Code is:-

<div class="modal fade" id="model_<?=$l_no;?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" >
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Preview</h4>
         </div>
         <div class=" modal-body">
            <?php if($row1['type']=='video'){ ?>
            <video  style="width: 100%; height:auto;" preload="none" controls>
               <source src="<?=$row1['file_path'];?>" type="video/mp4" >
            </video>
            <?php }elseif($row1['type']=='audio'){ ?> 
            <audio preload="none" controls>
               <source src="<?=$row1['file_path'];?>" type="audio/mpeg">
            </audio >
            <?php }else{ ?>
            <iframe src="http://docs.google.com/viewer?url=<?=$row1['file_path'];?>&embedded=true"  style="width: 100%; height:450px;"></iframe>
            <?php } ?>     
         </div>
      </div>
   </div>
</div>

and i also try all these functions

$('body').on('hidden.bs.modal', '.modal', function () {
  $('video').trigger('pause');
  //$('video').remove();
  $('video').currentTime = 0;
  //$('#myModalPrev .modal-body').empty();
  });

but it only pause my video but not able to stop buffering

Answer 1

Try using...

$('body').on('hidden.bs.modal', '.modal', function () {
   var video = jQuery('video').get(0);
   video.trigger("pause");
   video.addEventListener('pause',function(){
     var tmp_src = video.src;
     var playtime = video.currentTime;
     video.src = '';
     video.load();
     video.src = tmp_src;
     video.currentTime = playtime;
   });
 });