当我尝试单击视频以播放 HTML/CSS 时，视频模式不断关闭

Question

我在使用 html/css 和引导程序实现视频弹出窗口时遇到问题。

基本上，当我单击链接时，模态与视频一起出现，但是当我单击视频播放时，它会关闭模态。

我希望它使用户可以播放视频并与控件进行交互，当他们单击背景中远离视频的任意位置时，它会关闭视频。

您可以在我们的网站上看到它目前的工作方式 https://www.metis-online.com/#courses 您将在"解释器视频"下看到两个打开相关视频模型的链接。

.HTML：

<h5>Explainer Videos</h5>
<p>Check out our videos below taken from one of our recorded webinars to see if this certification is right for you:
<ul class="nobullet">
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-1">See what our online course looks like</a></li>   
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-2">Sample lessons</a></li>   
</ul>
<br/>
</p>

<div class="modal fade" id="flitpc-video-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content-vid">
<div class="modal-body">
<video id="flitpcdemo" controls autoplay width="100%">
<source src="./video2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<div class="modal fade" id="flitpc-video-2">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content-vid">
<div class="modal-body">
<video id="flitpcdemo" controls autoplay width="100%">
<source src="./video2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>

.CSS：

.modal-content-vid{
background: transparent !important;
border: none !important;
}

Answer 1

bootsrap modal有自己的结构。因此modal-content类是其内容可点击的元素之一，因此您需要添加modal-content类

$(function(){
$('.modal').modal({
show: false
}).on('hidden.bs.modal', function(){
$(this).find('video')[0].pause();
});
});

.modal-content-vid{
background: transparent !important;
border: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<h5>Explainer Videos</h5>
<p>Check out our videos below taken from one of our recorded webinars to see if this certification is right for you:
<ul class="nobullet">
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-1">See what our online course looks like</a></li>   
<li><a style="text-decoration: underline; color:white;" data-toggle="modal" data-target="#flitpc-video-2">Sample lessons</a></li>   
</ul>
<br/>
</p>
<div class="modal fade" id="flitpc-video-1">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-vid">
<div class="modal-body">
<video id="flitpcdemo" controls autoplay width="100%;z-index:100%">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
<div class="modal fade" id="flitpc-video-2">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-vid">
<div class="modal-body">
<video id="flitpcdemo" controls autoplay width="100%">
<source src="./video2.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</div>
CSS:

Answer 2

可能是事件冒泡的情况

https://javascript.info/bubbling-and-capturing

简而言之，正在发生的事情是您单击视频，但事件冒泡并到达父元素，该元素具有关闭弹出窗口的事件 所以你应该停止冒泡，

喜欢

<div class="modal-body" onclick=onModalBodyClick(event)>
<video id="flitpcdemo" controls autoplay width="100%">
<source src="./video2.mp4" type="video/mp4">
</video>
</div>

而在 JS 中

function onModalBodyClick(event) {
event.stoppropagation();
}