如何实现SVG精确响应式覆盖视频的实际播放区域？

嘿，我来帮你搞定这个问题！核心就是准确算出视频实际显示的有效播放区域，再让SVG跟着动态调整适配。下面分两部分解决你的需求：

1. 准确获取视频实际播放区域的坐标与尺寸 #

视频的实际播放区域是它按原生宽高比适配容器后显示的内容区域（也就是你说的红色矩形区域），我们可以通过对比视频原生宽高比和容器宽高比来计算：

先写一个复用的计算函数：

function getVideoPlayArea(videoElement) {
  // 视频原生宽高比
  const videoRatio = videoElement.videoWidth / videoElement.videoHeight;
  // 视频容器的宽高比
  const containerRatio = videoElement.clientWidth / videoElement.clientHeight;
  
  let playWidth, playHeight, offsetLeft, offsetTop;

  if (containerRatio > videoRatio) {
    // 容器比视频宽，视频上下会有黑边，播放区域高度等于容器高度
    playHeight = videoElement.clientHeight;
    playWidth = playHeight * videoRatio;
    offsetLeft = (videoElement.clientWidth - playWidth) / 2;
    offsetTop = 0;
  } else {
    // 容器比视频高，视频左右会有黑边，播放区域宽度等于容器宽度
    playWidth = videoElement.clientWidth;
    playHeight = playWidth / videoRatio;
    offsetTop = (videoElement.clientHeight - playHeight) / 2;
    offsetLeft = 0;
  }

  return {
    width: playWidth,
    height: playHeight,
    left: offsetLeft,
    top: offsetTop,
    // 获取视频元素在页面的绝对位置，方便SVG做全局定位（如果需要的话）
    elementRect: videoElement.getBoundingClientRect()
  };
}

这个函数会返回实际播放区域的宽高，以及相对于视频容器的偏移量，完全能满足定位需求。

2. 实现SVG精确覆盖的响应式设计 #

接下来让SVG动态匹配播放区域，这里提供两种实用方案：

方案一：直接调整SVG的位置和尺寸 #

你的SVG已经设置了position: absolute，我们可以直接修改它的样式属性来贴合播放区域：

修改你的脚本，添加更新SVG的逻辑：

const video = document.getElementById("video");
const svg = document.getElementById("svg");

function updateSvgToPlayArea() {
  const playArea = getVideoPlayArea(video);
  // 假设视频和SVG属于同一个父容器，直接用相对偏移设置位置
  svg.style.left = `${playArea.left}px`;
  svg.style.top = `${playArea.top}px`;
  svg.style.width = `${playArea.width}px`;
  svg.style.height = `${playArea.height}px`;
  
  // 如果需要在SVG内部绘制元素，同步设置viewBox让内部图形自适应
  svg.setAttribute('viewBox', `0 0 ${playArea.width} ${playArea.height}`);
}

// 绑定触发更新的事件
// 视频加载完成时
video.addEventListener('loadeddata', updateSvgToPlayArea);
// 窗口大小变化时
window.addEventListener('resize', updateSvgToPlayArea);
// 视频分辨率变化（比如切换清晰度）时
video.addEventListener('resize', updateSvgToPlayArea);

这样每次视频加载、窗口调整、视频自身尺寸变化时，SVG都会自动调整到完全覆盖实际播放区域。

方案二：在SVG内部绘制匹配区域（适合需要添加内部元素的场景） #

如果你的SVG需要在播放区域内绘制图形，可以保持SVG和视频容器同尺寸，然后在SVG里画一个矩形匹配播放区域：

先修改SVG结构：

<svg id="svg" width="100%" height="100%" style="position: absolute; left:0px; top:0px; pointer-events: none;">
  <!-- 灰色背景覆盖整个容器，方便观察 -->
  <rect width="100%" height="100%" fill="gray" opacity="0.5"/>
  <!-- 红色矩形对应实际播放区域 -->
  <rect id="play-area-rect" fill="red" opacity="0.5"/>
</svg>

然后添加更新矩形的函数：

function updateSvgPlayRect() {
  const playArea = getVideoPlayArea(video);
  const playRect = document.getElementById('play-area-rect');
  if (playRect) {
    playRect.setAttribute('x', playArea.left);
    playRect.setAttribute('y', playArea.top);
    playRect.setAttribute('width', playArea.width);
    playRect.setAttribute('height', playArea.height);
  }
}

// 同样绑定事件触发更新
video.addEventListener('loadeddata', updateSvgPlayRect);
window.addEventListener('resize', updateSvgPlayRect);
video.addEventListener('resize', updateSvgPlayRect);

这种方式能直观看到播放区域的位置，也方便后续在SVG内添加其他交互元素。

小提示 #

你可以在更新函数里加console.log(playArea)，查看计算出的参数是否正确，也可以通过浏览器开发者工具检查SVG的样式/元素属性是否符合预期。

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