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

Posted 2023-05-07

【中文标题】在模态之外单击时暂停 HTML mp4 视频

【英文标题】：Pause HTML mp4 video when clicking outside of modal

【发布时间】：2021-10-10 22:09:36

【问题描述】：

当我通过单击模式外部关闭模式时，我一直试图让视频停止播放。当用户单击模态框内的“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-line></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"  >
                  <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();
  );
);

【参考方案1】：

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

例子：

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

【讨论】：

Avada 的问题我必须用jQuery(document).ready(function($) 开始每个脚本，所以这段代码会抛出一个错误。我像jQuery(document).on('click', function(element) 一样写了它，但在下一行@Shree 出现“$ 不是函数”错误

$ is not a function 表示 jQuery 库没有正确加载。请参阅控制台 -> 网络选项卡。另请参阅更新的答案。 document.ready 的缩写形式。

我用.modal-dialog 替换了.fusion-modal，它成功了。谢谢！