Firefox控件显示时视频拖拽功能失效的解决方法问询

1. 修改HTML结构 #

在视频容器内添加一个透明覆盖层，用于捕获拖拽所需的鼠标事件：

<div class="modal-boxes">
  <div id="draggable" class="ui-widget-content" style="display:inline-block;">
    <div id="resizable" >
      <div id="video-container_1" >
        <!-- 添加拖拽捕获覆盖层 -->
        <div id="video-overlay"></div>
        <video id="myPlayer_1" controls disablePictureInPicture preload="auto" width="100%" height="100%" poster="myPoster " >
          <source id="source_1" src="myVideo.mp4" type='video/mp4' >
          Your browser does not support HTML5 video.
        </video>          
      </div>           
      <a href="#" id="big-play-button" class="playpause"></a>
      <a href="#" id="big-exit-button" class="exitclose"></a>              
    </div>
  </div>
</div>

2. 添加CSS样式 #

让覆盖层铺满整个视频容器，确保它能捕获鼠标事件，同时不遮挡视觉效果：

#video-container_1 {
  position: relative;
}

#video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: transparent;
  pointer-events: auto;
}

3. 优化交互逻辑（可选） #

为了确保视频控件能正常响应点击，添加JavaScript处理覆盖层的事件穿透：

$(function() {
  $("#resizable").resizable();
  $('#draggable').draggable();

  // 处理覆盖层事件，兼顾拖拽和控件操作
  $('#video-overlay')
    .on('mousedown', function() {
      $(this).data('isDragging', true);
    })
    .on('mouseup mouseleave', function() {
      $(this).data('isDragging', false);
    })
    .on('click', function(e) {
      if (!$(this).data('isDragging')) {
        // 临时关闭覆盖层事件捕获，让点击穿透到视频控件
        $(this).css('pointer-events', 'none');
        $('#myPlayer_1').trigger(e.type, e);
        // 恢复事件捕获，以便下次拖拽
        setTimeout(() => {
          $(this).css('pointer-events', 'auto');
        }, 0);
      }
    });
});

原理说明 #

覆盖层铺满视频区域后，会优先捕获鼠标mousedown事件，从而触发#draggable容器的拖拽行为。同时通过事件判断逻辑，确保用户点击视频控件时，事件能正常穿透到原生控件，不影响播放、暂停等操作，完美解决Firefox下的拖拽失效问题。

内容的提问来源于stack exchange，提问作者user20973771