标签本身不提供数据读取能力，它是纯声明式标签，仅向 或 提供候选资源路径，浏览器按顺序尝试加载直至成功；它不暴露任何 api，无法用 javascript 直接读取其 src、type 或 media 属性值——除非手动解析 dom。
为什么 <source></source> 本身不提供数据读取能力
<source></source> 是纯声明式标签，只用于为 <audio></audio> 或 <video></video> 提供候选资源路径，浏览器按顺序尝试加载直到成功。它不暴露任何 API，无法用 JavaScript 直接“读取”它的 src、type 或 media 属性值——除非你手动解析 DOM。
真正能拿到实际加载源的，是媒体元素自身：<audio></audio> 和 <video></video> 的 currentSrc 属性，它返回浏览器最终选定并开始加载的 URL（含重定向后地址）。
如何从 <video></video> 获取当前生效的源地址
监听 loadedmetadata 事件最可靠，此时 currentSrc 已确定，且元数据（如尺寸、时长）已就绪：
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
console.log('实际加载的源：', video.currentSrc);
console.log('原始 source 列表：', Array.from(video.querySelectorAll('source')).map(s => s.src));
});
-
currentSrc是只读属性，反映最终加载结果，可能和任一<source></source>的src一致，也可能因 CORS 重定向或服务端跳转而不同 - 不要依赖
loadstart或canplay，前者currentSrc可能尚未更新，后者在某些浏览器中可能触发过早 - 若需区分多格式 fallback 逻辑（如优先 WebM，降级 MP4），应直接检查
<source></source>节点的type属性 +canPlayType()，而非等加载完成
用 canPlayType() 预判哪个 <source></source> 会被选中
浏览器选择 <source></source> 时，会按 DOM 顺序调用 canPlayType() 检查 type 值。你可以模拟这个过程，提前知道大概率加载哪一个：
立即学习“前端免费学习笔记（深入）”；
const video = document.querySelector('video');
const sources = video.querySelectorAll('source');
let chosenSource = null;
for (const source of sources) {
const type = source.type || '';
const canPlay = video.canPlayType(type);
if (canPlay === 'probably' || canPlay === 'maybe') {
chosenSource = source;
break;
}
}
console.log('预判将加载：', chosenSource?.src);
-
canPlayType()返回''、'probably'或'maybe'，空字符串表示完全不支持 - 该方法不触发网络请求，适合做格式兼容性探测或 UI 状态判断（例如禁用下载按钮当无匹配 source）
- 注意：
canPlayType('video/mp4; codecs="avc1.42E01E"')比canPlayType('video/mp4')更精确，但需与实际编码参数一致
绕过 <source></source> 直接管理源地址的更可控方式
如果业务需要动态切换、记录或验证源，硬绑 <source></source> 标签反而增加解析负担。推荐把源列表存在 JS 变量中，用 src 属性直接赋值：
const mediaSources = [
{ src: '/video.webm', type: 'video/webm' },
{ src: '/video.mp4', type: 'video/mp4' }
];
const video = document.querySelector('video');
video.src = mediaSources.find(s => video.canPlayType(s.type) !== '')?.src || '';
// 后续可随时读取、替换、上报
console.log('当前源配置：', video.src);
- 避免反复查询 DOM，减少对
<source></source>的依赖 - 便于注入鉴权 token、AB 测试路径、CDN 切换等逻辑
- 注意：设置
src后需手动调用video.load()触发重新加载（除非自动播放已启用）
<source></source> 更像 HTML 层的 fallback 声明，真要取数、切源、埋点，得靠媒体元素自身的属性和方法，再配合 JS 主动管理。DOM 解析只是兜底手段，别当主力。 
