标签本身不提供数据读取能力，它是纯声明式标签，仅向 或 提供候选资源路径，浏览器按顺序尝试加载直至成功；它不暴露任何 API，无法用 JavaScript 直接读取其 src、type 或 media 属性值——除非手动解析 DOM。
为什么
或 提供候选资源路径，浏览器按顺序尝试加载直到成功。它不暴露任何 API，无法用 JavaScript 直接“读取”它的 src、type 或 media 属性值——除非你手动解析 DOM。
真正能拿到实际加载源的，是媒体元素自身： 和 的 currentSrc 属性，它返回浏览器最终选定并开始加载的 URL（含重定向后地址）。
如何从
监听 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是只读属性，反映最终加载结果，可能和任一src一致，也可能因 CORS 重定向或服务端跳转而不同 - 不要依赖
loadstart或canplay，前者currentSrc可能尚未更新，后者在某些浏览器中可能触发过早 - 若需区分多格式 fallback 逻辑（如优先 WebM，降级 MP4），应直接检查
type属性 +canPlayType()，而非等加载完成
用 canPlayType() 预判哪个
浏览器选择 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')更精确，但需与实际编码参数一致
绕过
如果业务需要动态切换、记录或验证源，硬绑 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，减少对
- 便于注入鉴权 token、AB 测试路径、CDN 切换等逻辑
- 注意：设置
src后需手动调用video.load()触发重新加载（除非自动播放已启用）
