HbbTV广播画面比例切换：图形位置适配方案咨询

一、检测画面比例变化的方式 #

• 监听容器尺寸变化：用JS监听视频容器的resize事件，实时计算宽高比（宽÷高），对比16:9（≈1.777）和4:3（≈1.333）的阈值，判断当前比例。
• 监听视频本身的尺寸变化：如果是视频源切换导致的比例变化，可以监听视频元素的loadedmetadata事件，或者定时检查videoWidth和videoHeight属性，判断比例是否改变。

二、用CSS实现适配的几种方法 #

1. 优先使用相对单位代替固定像素 #

如果你的图形是基于视频画面的相对位置，直接把固定像素换成百分比是最省心的方案：
比如原16:9下(1000,40)，假设16:9容器为1920×1080，横向占比为1000/1920≈52.08%，纵向占比为40/1080≈3.7%。给图形添加样式：

.overlay-graphic {
  position: absolute;
  left: 52.08%;
  top: 3.7%;
}

不管容器比例怎么变化，图形都会保持相对画面的位置不变，无需额外检测逻辑。

2. 用CSS容器查询做精准适配 #

如果需要针对不同比例使用固定像素定位，现代浏览器支持的容器查询可以直接实现：

/* 给视频容器定义容器查询上下文 */
.video-container {
  container-type: size;
}

/* 16:9比例下的定位 */
@container (aspect-ratio: 16/9) {
  .overlay-graphic {
    left: 1000px;
    top: 40px;
  }
}

/* 4:3比例下的定位 */
@container (aspect-ratio: 4/3) {
  /* 按相对位置换算：假设4:3容器高度和16:9一致为1080px，宽度为1440px，1000/1920×1440=750px */
  left: 750px;
  top: 40px;
}

这种方式无需JS，纯CSS就能根据容器比例自动切换样式。

3. 旧环境下用JS+CSS类切换适配 #

如果要兼容不支持容器查询的旧环境，或者有更复杂的逻辑，可以用JS检测比例后给容器添加对应类，再用CSS调整：

const container = document.querySelector('.video-container');

function updateRatioClass() {
  const ratio = container.clientWidth / container.clientHeight;
  if (Math.abs(ratio - 16/9) < 0.01) {
    container.classList.add('ratio-16-9');
    container.classList.remove('ratio-4-3');
  } else if (Math.abs(ratio - 4/3) < 0.01) {
    container.classList.add('ratio-4-3');
    container.classList.remove('ratio-16-9');
  }
}

// 初始化执行一次
updateRatioClass();
// 监听窗口/容器尺寸变化
window.addEventListener('resize', updateRatioClass);
// 视频加载元数据时也检测比例
document.querySelector('.video-player').addEventListener('loadedmetadata', updateRatioClass);

对应的CSS样式：

.video-container.ratio-16-9 .overlay-graphic {
  left: 1000px;
  top: 40px;
}

.video-container.ratio-4-3 .overlay-graphic {
  left: 750px;
  top: 40px;
}

三、关键注意事项 #

• 确保视频容器的尺寸和播放画面完全匹配，不要留黑边，否则比例计算会出错。
• 能用相对单位就别用固定像素，减少后续维护成本。
• 如果必须使用固定像素，提前计算好不同比例下的对应坐标，保证图形在视觉上的相对位置一致。

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