可用 document.querySelectorAll('audio, video') 判断媒体元素是否存在，但需注意执行时机；若需排除空壳元素，应检查 src、source 子元素或 readyState；canPlayType() 返回字符串而非布尔值，实际应用推荐监听 canplay 事件。
如何用 JavaScript 判断页面中是否存在 <audio> 或 <video> 元素
直接查 DOM 就行，不需要依赖第三方库。浏览器原生支持的 document.querySelectorAll 足够可靠：
const audioElements = document.querySelectorAll('audio');
const videoElements = document.querySelectorAll('video');
const hasMedia = audioElements.length > 0 || videoElements.length > 0;
注意：这个判断只看标签是否存在，不关心是否加载成功、是否有 src 或是否被 display: none 隐藏。如果要排除“空壳”元素（比如没 src 也没子 <source>），得进一步检查：
-
element.src是否为非空字符串（注意：可能返回绝对 URL 即使写的是相对路径） -
element.children中是否存在<source>或<track>等子元素 -
element.readyState值（0表示尚未初始化，1表示已获取元数据，2表示可开始播放）
为什么 document.querySelector('audio, video') 有时返回 null
常见原因不是语法错，而是执行时机不对。媒体元素常由框架（如 React/Vue）动态插入，或依赖异步资源（如通过 innerHTML 注入）。此时 JS 执行早于 DOM 渲染完成。
- 确保脚本放在
</body>前，或监听DOMContentLoaded - 若元素是懒加载/条件渲染的，需配合 MutationObserver 监听新增节点
- 服务端渲染（SSR）场景下，初始 HTML 可能不含媒体标签，客户端 hydrate 后才出现
简单验证方式：
setTimeout(() => {
console.log(document.querySelector('audio'));
}, 1000);——如果一秒后能取到，基本就是时机问题。
<audio> 和 <video> 的 canPlayType() 返回值怎么解读
这个方法不是布尔值判断，而是返回字符串：'probably'、'maybe' 或空字符串。它只反映浏览器对 MIME 类型+编码组合的**本地支持能力**，和文件实际能否播放无关。
立即学习“前端免费学习笔记（深入）”；
-
audio.canPlayType('audio/mp3')→ 错误写法，正确是'audio/mpeg' -
video.canPlayType('video/webm; codecs="vp8, vorbis"')→ 必须带 codecs 参数才有效 - 返回
'probably'不代表一定能播（比如缺少解码器或 DRM 权限），返回空也不代表绝对不能播（可能只是浏览器没内置该 codec 列表）
实际项目中更稳妥的做法是监听 canplay 或 canplaythrough 事件，而非依赖 canPlayType() 预判。
用 CSS 选择器识别媒体元素的隐藏/禁用状态
HTML5 媒体元素没有统一的伪类，但可通过属性和样式组合识别：
-
audio[controls]→ 显示原生控件的音频元素 -
video:not([src]):empty→ 没src且无子元素的<video> -
audio[preload="none"]→ 明确设置不预加载的音频 - 结合 CSS：
audio:paused是无效的，但可以用audio:not(:playing)（仅部分浏览器支持）；更兼容的方式是用 JS 监听paused属性变化
注意：:playing 是实验性伪类，Safari 和旧版 Edge 不支持，生产环境慎用。
真正难识别的不是标签存在与否，而是“是否正在有效播放”——这需要同时检查 networkState、readyState、paused、muted、volume 甚至 webkitAudioContext.state（如果走 Web Audio 处理）。一个 <video> 标签可能 src 正确、已加载、未暂停，但因静音或音量为 0 被当成“无声失效”。这类边界情况，光靠选择器或单个属性没法覆盖全。
