data-src不会被audio/video自动读取，必须用JavaScript将其值赋给src并调用load()；懒加载时需防重复触发，推荐统一使用data-src并确保元素可被正确选取。
data-src 不能直接被 <audio> 或 <video> 自动读取
HTML 的 data- 属性只是自定义存储，浏览器不会把它当真实资源地址用。你写 <video ></video>，播放器根本不会加载这个地址——它只认 src 属性或 source 子元素。
常见错误现象：页面渲染正常、控制栏显示，但点击播放没反应，控制台也无报错；或者触发了 error 事件但没提示具体原因。
- 必须手动把
data-src的值赋给src（或调用load()）才能生效 - 如果用了多个
source，建议优先操作source元素的src，再调用父容器的load() - 动态设置后，记得调用
element.load()，否则部分浏览器（如 Safari）可能不重新解析
用 JavaScript 绑定 data-src 到 src 的最小可行写法
最直接的方式是获取元素，读取 dataset.src，再写入 src：
const video = document.querySelector('video[data-src]');
if (video) {
video.src = video.dataset.src;
video.load(); // 必须显式调用
// video.play().catch(e => console.warn('Autoplay blocked:', e));
}
注意：dataset.src 对应的是 data-src，驼峰命名自动转换（data-video-id → dataset.videoId）。
立即学习“前端免费学习笔记（深入）”；
- 如果页面有多个音视频，用
querySelectorAll遍历，别漏掉load() - 不要在 DOM 加载前执行，推荐放在
DOMContentLoaded或defer脚本里 - 若地址含空格或特殊字符，确保已 URL 编码；否则可能解析失败但无明显报错
data-src 配合懒加载时的典型陷阱
很多场景下，data-src 是为懒加载服务的（比如滚动到视口才加载），这时容易忽略两个关键点：
- 首次播放前未触发加载逻辑：用户点击播放按钮，但脚本还没运行，
src仍是空，直接失败 - 重复绑定导致多次
load()：监听click时没做防重，用户多点几次就反复调用load()，某些浏览器会中断当前加载流程 - 移动端 touch 事件兼容性：仅监听
click在 iOS 上可能延迟 300ms，建议同时监听touchstart并preventDefault（若不需要默认行为）
推荐加个标记位避免重复加载：if (!video.hasAttribute('data-loaded')) { video.src = ...; video.setAttribute('data-loaded', ''); }
为什么不用 data-video-src 而用 data-src？
名字本身不影响功能，但实际中建议统一用 data-src —— 它和原生 src 属性语义一致，配合框架（如 Alpine.js、HTMX）或通用工具函数时兼容性更好。
如果项目里混用了 data-video-src、data-audio-url 等多种命名，后续维护时容易漏处理某类元素。更麻烦的是，有些 CMS 或低代码平台导出的 HTML 会自动标准化为 data-src，自己另起一套反而增加适配成本。
真正要留心的不是名字，而是：是否所有含 data-src 的媒体元素都进了初始化逻辑？有没有被 CSS display: none 或 hidden 属性挡住导致 querySelector 拿不到？这些比命名问题更容易导致静默失败。
