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

Question

我在使用 html/css 和 bootstrap 实现视频弹出时遇到问题。

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

我想要它，以便用户可以播放视频并与控件交互，当他们单击背景中远离视频的任何位置时，它会关闭视频。

您可以在我们的网站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();
}