video和audio的src属性受base标签影响，但仅限纯相对路径（不以/、:或协议开头）；根相对、绝对路径及js动态赋值均不受影响。
video 和 audio 的 src 属性是否受 base 标签影响
受，但仅限于纯相对路径（即不以 /、: 或协议开头的字符串）。只要 <video src="clip.mp4"></video> 这类写法中 src 值是纯相对路径，浏览器在 HTML 解析阶段就会用 <base href="/assets/"> 重算最终 URL。
常见错误是误以为所有路径都走 base：比如 src="/videos/intro.mp4"（根相对）或 src="https://cdn.example.com/vid.mov"（绝对），这两种完全绕过 <base>，不受任何影响。
-
<video src="demo.webm"></video>→ 拼成/assets/demo.webm（✅ 受控） -
<audio src="bgm.ogg"></audio>→ 拼成/assets/bgm.ogg（✅ 受控） -
<video src="./media/trailer.mp4"></video>→ 仍按当前页面 URL 解析（⚠️./不是纯相对路径，<base>不处理） -
<audio src="https://example.com/sound.mp3"></audio>→ 直接使用原地址（❌ 不受控）
srcset、preload、poster 等属性是否同步生效
poster 和 preload 本身不带路径，不涉及解析；但 srcset 中的每个候选 URL 都要单独判断——只有其中的纯相对路径项才被 <base> 重写。
例如：<img srcset="thumb-1x.jpg 1x, thumb-2x.jpg 2x"> 会全部受控；但 <video srcset="vid-480.mp4 480w, /vid/720.mp4 720w"></video> 中，前者被重写，后者（以 / 开头）保持不变。
-
poster="cover.jpg"→ ✅ 受控（纯相对） -
poster="/img/cover.jpg"→ ❌ 不受控（根相对） -
srcset="a.webm, b.mp4"→ ✅ 两个都受控 -
srcset="a.webm, https://cdn/v.mp4"→ ❌ 后者跳过 base
JavaScript 动态设置 video.src 后会不会重新走 base
不会。一旦 HTML 解析完成，<base> 就不再参与任何路径计算。JS 执行 video.src = "loop.mp4" 时，浏览器直接以当前文档 URL 为基准解析，完全无视 document.baseURI。
想让 JS 路径也走 base，必须显式构造：video.src = new URL("loop.mp4", document.baseURI).href。否则本地开发看着正常，上线后因 base 生效范围错位，视频突然 404。
- HTML 中写
<video src="intro.mp4"></video>→ ✅ 解析时走 base - JS 中写
video.src = "intro.mp4"→ ❌ 绝对不走 base - JS 中写
video.src = new URL("intro.mp4", document.baseURI).href→ ✅ 手动模拟 base 行为 - fetch() 加载字幕文件（如
fetch("sub.vtt")）→ ❌ 完全绕过 base
为什么视频资源容易在部署后 404 却查不出原因
因为 <base> 失效是静默的：href 写错（比如漏了结尾斜杠）、放错位置（在 <title></title> 后）、或者用了构建占位符（如 %PUBLIC_URL%/）却没被替换，都会导致浏览器直接丢弃整个标签——控制台零提示，所有 src="xxx.mp4" 全部退回到按当前页面 URL 解析，而那个页面 URL 往往根本不是资源所在目录。
最容易被忽略的是 Firefox 对结尾无斜杠的截断行为：<base href="/videos"> 在 Firefox 中可能把后续 src="a.mp4" 解析成 /videosa.mp4，而不是预期的 /videos/a.mp4。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
