如何在支持 HDR 的显示器上隐藏部分

Question

我真的不是编码员，但我正在尝试在 HDR 和 SDR 视频之间切换网站。

我知道“动态范围：”很新，但这里发生的是：

对于 SDR 显示 returns true 为标准，false 为高
对于支持 HDR 的显示器，它 returns 对于高标准和标准都适用

以便在 HDR 显示器上同时显示 SDR 和 HDR 部分。关于如何解决这个问题的任何提示？

<!DOCTYPE html>
<html>
<style>
h1{
  display: none;
}
@media only screen and (dynamic-range: high) {
  .hdr{
    display: block;
  }
}
@media (dynamic-range: standard) {
   .sdr {
        /* Styles for displays not capable of HDR. */
     display: block;
   }
}
</style>
<body style="background-color:DarkOrchid;">
<h1 class="hdr">
  HDR DETECTED
<video class="video" width="100%" autoplay loop muted playsinline>
  <source
    src="/video2/baloons_alpha_hevc.mov"
    type="video/quicktime">
  <source
    src="/video2/baloons_alpha_VP9.webm"
    type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>
</h1>
<h1 class="sdr">
  SDR detected ,  you should upgrade your stuff, boomer
<video class="video" width="100%" autoplay loop muted playsinline>
  <source
    src="/video2/baloons_alpha_hevc_sdr.mov"
    type="video/quicktime">
  <source
    src="/video2/baloons_alpha_VP9_sdr.webm"
    type="video/webm">
</video>
</h1>
</body>
</html>

Answer 1

您应该能够在单个媒体查询中通过将样式块中的所有内容替换为以下内容来执行此操作：

.hdr {
  display: none;
}

@media only screen and (dynamic-range: high) {
  .hdr{
    display: block;
  }
  .sdr{
    display: none;
  }
}

然后您可以删除其他媒体查询，并且一次只能看到一个块。（注意：我假设您用于检测 HDR 功能的媒体查询是准确的。）

Answer 2

试试这个：

@media only screen and (dynamic-range: high) {
  .hdr{
    display: block;
  }
  .sdr {
     display: none;
   }
}
@media (dynamic-range: standard) {
   .hdr{
    display: none;
  }
   .sdr {
     display: block;
   }    
}

不要使用这个：

<h1 class="className">
   <video></video>
</h1>

尝试使用一些div

<div class="className">
   <h1></h1>
   <video></video>
</div>

如何在支持 HDR 的显示器上隐藏部分

How to hide a section on a HDR capable display

html

css

hdr