HTML5音频视频标签怎么识别_HTML5媒体元素识别技巧【识别】

可用 document.querySelectorAll('audio, video') 判断媒体元素是否存在，但需注意执行时机；若需排除空壳元素，应检查 src、source 子元素或 readyState；canPlayType() 返回字符串而非布尔值，实际应用推荐监听 canplay 事件。

如何用 JavaScript 判断页面中是否存在 或 元素

直接查 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 也没子 ），得进一步检查：

• element.src 是否为非空字符串（注意：可能返回绝对 URL 即使写的是相对路径）
• element.children 中是否存在 或 等子元素
• element.readyState 值（0 表示尚未初始化，1 表示已获取元数据，2 表示可开始播放）

为什么 document.querySelector('audio, video') 有时返回 null

常见原因不是语法错，而是执行时机不对。媒体元素常由框架（如 React/Vue）动态插入，或依赖异步资源（如通过 innerHTML 注入）。此时 JS 执行早于 DOM 渲染完成。

• 确保脚本放在