Bootstrap Modal Video 使用mp4视频无法关闭解决方法

最新推荐文章于 2022-12-28 17:15:52 发布

鲤小熙

最新推荐文章于 2022-12-28 17:15:52 发布

阅读量912

点赞数

文章标签： bootstrap javascript

本文链接：https://blog.csdn.net/xiaoxikoi/article/details/107238856

版权

<button type="button" class="btn btn-primary  btn_video_box" vsrc="此处放MP4地址" data-toggle="modal" data-target="#exampleModal">
 Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content" id="koi_video">
      <div class="modal-header">
        <button type="button" class="close close_video" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="koi_video_cont">
		  <div class="embed-responsive embed-responsive-16by9">
			<video id="koi_v" src="" preload="" controls="" width="100%" height="auto"></video>
		  </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
	var popV = document.getElementById('koi_v');
	$('.btn_video_box').on('click',function(){
	    var vsrc = $(this).attr('vsrc');
	    popV.src = vsrc;
		$('#koi_video').show();
	    popV.play();
	});
	$('.modal').click(function() {
	    popV.pause();
	    $('#koi_video').hide();
	});
</script>