HTML source标签的media媒体查询进阶？根据暗色模式切换视频-html教程-PHP中文网

source 的 media 属性不响应 prefers-color-scheme 切换，浏览器不会因此切换视频源；这是规范限制，video 中的 media 仅作提示，不触发重加载，须用 js 监听 matchmedia 并手动更新 src。

html source标签的media媒体查询进阶？根据暗色模式切换视频

source 的 media 属性不响应 prefers-color-scheme 切换视频

直接用 media="(prefers-color-scheme: dark)" 写在 <source></source> 上，**浏览器不会因此切换视频源**。这不是 bug，是规范限制：<video></video> 中的 media 仅作提示，不触发重加载或回退逻辑。实测 Chrome/Firefox 均会预加载所有 <source></source>（除非显式设 preload="none"），且切换系统主题后，已播放的视频不会自动换源。

想按暗色模式切视频，得用 JS 动态替换 src

真正可控的方式是放弃依赖 media，改用 JavaScript 监听并手动更新 <video></video> 的 src 或 <source></source> 列表：

用 window.matchMedia("(prefers-color-scheme: dark)") 获取初始状态
用 .addEventListener('change', handler) 监听系统主题变化（注意不是 onchange）
切换时调用 video.load() 并重新设置 src，或清空旧 <source></source> 后 appendChild 新的
务必加 try/catch 处理加载失败，避免静音/黑屏无提示

示例关键逻辑：

const video = document.querySelector('video');
const darkSrc = 'video-dark.mp4';
const lightSrc = 'video-light.mp4';

function updateVideoSrc() {
  const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  video.src = isDark ? darkSrc : lightSrc;
  video.load();
}

updateVideoSrc();
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateVideoSrc);