在模式外单击时暂停 HTML mp4 视频

Question

我一直在尝试通过单击模态外部来关闭模态时停止播放视频。当用户单击模式框内的“x”时，我已经能够做到这一点。它正在使用 html 视频，视频是 mp4 格式。

HTML

<div class="fusion-modal modal fade modal-1 video in" tabindex="-1" role="dialog" aria-labelledby="modal-heading-1" aria-hidden="false" style="display: block;">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content fusion-modal-content" style="background-color:#ffffff">
         <div class="modal-header">
            <button class="close" type="button" data-dismiss="modal" aria-hidden="true" aria-label="Close">×</button>
            <h3 class="modal-title fusion-responsive-typography-calculated" id="modal-heading-1" data-dismiss="modal" aria-hidden="true" data-fontsize="24" style="--fontSize:24; line-height: 1.45;" data-lineheight="34.8px"></h3>
         </div>
         <div class="modal-body fusion-clearfix">
            <div id="player-overlay">
               <div class="vsc-controller"></div>
               <video id="videoId" poster="/wp-content/uploads/2021/08/video-thumbnail.png" controls="controls" width="100%" height="150">
                  <source src="[video].mp4" type="video/mp4">
               </video>
            </div>
         </div>
      </div>
   </div>
</div>

JS

jQuery(document).ready(function($) {
  var vid = document.getElementById("#videoId");
  $('button.close').click(function(){
     vid.pause();
  });
});

Answer 1

通过 element.target 检查目标元素是否是您的模式。如果没有暂停您的视频。

示例：

$(function() {
$(document).on('click', function(element) {
        if (!$(element.target).closest('.fusion-modal').length) {
           $("#videoId").pause();
        }
    });
});

在模式外单击时暂停 HTML mp4 视频

Pause HTML mp4 video when clicking outside of modal

html

javascript

jquery

html5-video