如何为黑暗模式加载不同的视频

Question

我想根据 light/dark 模式加载不同的视频吗？

我四处搜索，但只找到了如何为图像做这件事。

    <picture>
      <source 
        srcset="settings-dark.png"
        media="(prefers-color-scheme: dark)"
      />
      <source
        srcset="settings-light.png"
        media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
      />
      <img src="settings-light.png" id="screenshot" loading="lazy" />
    </picture>

我尝试对视频标签应用相同的逻辑，但它似乎不起作用。

Answer 1

很遗憾，video 元素中的 source 元素不支持 media。这让我们需要像这样使用多个视频标签（或 javascript）：

<style>
  .dark-video {
    display: none;
  }

  @media (prefers-color-scheme: dark) {
    .dark-video {
      display: block;
    }

    .light-video {
      display: none;
    }
  }
</style>

<video class="light-video" src="/light.mp4" />
<video class="dark-video" src="/dark.mp4" />

Answer 2

可能值得注意的是，Safari 支持源标记中的媒体 'prefers-color-scheme' 参数。但是对于基本上所有的浏览器，你都需要一个回退。但是，如果您直接定位到移动设备 iOS，则可以简单地做到这一点。

<video autoplay loop muted>
  <source src="light-bg.mp4" type="video/mp4" media="(prefers-color-scheme:light)">
  <source src="dark-bg.mp4" type="video/mp4" media="(prefers-color-scheme:dark)">
</video>

如何为黑暗模式加载不同的视频

How to load a different video for Dark Mode

html

css

html5-video