如何判断HTML5视频是否播放HDR内容？能否检测其扩展色域状态？

一、判断当前是否正在播放HDR内容 #

你可以通过HTML5视频元素的videoColorSpace属性来判断，该属性会返回视频的色彩空间信息，包括HDR相关元数据：

• 检查videoColorSpace.hdrMetadata：如果该属性存在且不为空，说明视频包含HDR元数据，正在播放HDR内容。
• 检查色彩空间类型：HDR常用的色彩空间类型为pq（感知量化）和hlg（混合对数伽马），若videoColorSpace.type是这两个值之一，也可判定为HDR。

示例代码：

const videoEl = document.querySelector('video');

function checkIsHDR() {
  if (!videoEl.videoColorSpace) return false;
  // 两种判断逻辑满足其一即可
  return !!videoEl.videoColorSpace.hdrMetadata || 
         ['pq', 'hlg'].includes(videoEl.videoColorSpace.type);
}

// 使用示例
if (checkIsHDR()) {
  console.log('当前播放的是HDR视频');
} else {
  console.log('当前播放的是SDR视频');
}

二、检测视频切换到扩展色域（HDR）的时机 #

可以监听视频元素的videoColorSpacechange事件，该事件会在视频的色彩空间发生变化时触发（包括从SDR切换到HDR，或反之）：

示例代码：

videoEl.addEventListener('videoColorSpacechange', () => {
  if (checkIsHDR()) {
    console.log('视频已切换至HDR模式');
    // 这里可添加切换HDR后的逻辑，比如显示HDR标识、调整页面适配样式等
  } else {
    console.log('视频已切换至SDR模式');
  }
});

注意事项 #

• 浏览器兼容性：videoColorSpace和videoColorSpacechange事件目前仅在Chrome、Edge、Safari的较新版本中支持，Firefox需开启特定实验性配置才能使用。
• 视频元数据依赖：只有当视频文件本身嵌入了正确的色彩空间元数据时，浏览器才能识别并返回准确的videoColorSpace信息。若视频无相关元数据，即使是HDR内容，也可能无法被检测到。

内容的提问来源于stack exchange，提问作者Alan H.