How to hide a section on a HDR capable display-CodePudding

Really not a coder but I am trying to make a website switch between HDR and SDR videos.

I am aware the "dynamic-range:" is pretty new but what is happening here is that:

for a SDR display it returns true for standard and false for high
For a HDR capable display it returns true for both high and standard

so that on a HDR display both SDR and HDR sections are shown. any hints on how to get around that?

<!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 >
  HDR DETECTED
<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 >
  SDR detected ,  you should upgrade your stuff, boomer
<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>

CodePudding user response：

You should be able to just do this in a single media query by replacing everything in your style block with the following:

.hdr {
  display: none;
}

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

Then you can remove the other media query and only one block should be visible at a time. (Note: I'm assuming your media query for detecting HDR capability is accurate.)

CodePudding user response：

Try this:

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

And don't use this:

<h1 >
   <video></video>
</h1>

Try to use some div

<div >
   <h1></h1>
   <video></video>
</div>