Question

我有一个模态提升的视频。我无法弄清楚怎么做，关闭视频结尾处的模态。

<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>

Answer 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

在视频结尾处关闭了一个模态

1 个答案: