2017-08-28 87 views
1

我有模式boostpps中的视频。我无法弄清楚如何去做,在视频结尾处关闭模式。在视频结尾处关闭模式

<section class="video"> 
    <button type="button" class="btn btn-lg video__btnModal" data-toggle="modal" data-target="#video__btnModal">VIDEO</button> 
    <div id="video__btnModal" tabindex="-1" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     <div class="modal-body"> 
      <video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;"> 
      <source src="./assets/video/video.mp4" type="video/mp4"> 
      <source src="./assets/video/video.mov" type="video/mov"> 
      </video> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

回答

1

JS

<script type='text/javascript'> 
    document.getElementById('video1').addEventListener('ended',myHandler,false); 
    function myHandler(e) { 
     // What you want to do after the event 
    } 
</script> 

jQuery的

$("#video1").on("ended", function() { 
    //TO DO: Your code goes here... 
     alert("Video Finished"); 
}); 

隐藏模态,你需要调用

$('#video__btnModal').modal('hide');// hides the modal 

$('#video__btnModal').modal('toggle');// toggles between hide and show 
+0

非常感谢您睦h为你的帮助 – DenisMasot