详解HTML中base标签对多媒体资源的作用-html教程-PHP中文网

标签影响和的src及poster属性中的纯相对路径，如video src="clip.mp4"会被解析为/base/clip.mp4；但根相对路径（/xxx）、绝对url、js动态赋值及css background-image均不受影响。

详解html中base标签对多媒体资源的作用

base 标签是否影响

影响，但仅限于硬编码的相对路径。只要 <video src="clip.mp4"></video> 这样的写法出现在 HTML 源码中，<base href="https://www.php.cn/link/18b7f6c087d78f069d5aec62425ddc78"> 就会让浏览器把 clip.mp4 解析为 https://www.php.cn/link/18b7f6c087d78f069d5aec62425ddc78clip.mp4，和当前页面 URL 无关。

常见错误现象是：本地开发时视频能播，上线后 404——往往因为 <base> 的 href 值不合法（比如缺结尾 / 或含 ../），导致标签被静默忽略，src 又退回到按页面 URL 解析，路径错位。

<video src="videos/intro.mp4"></video> → 受 <base href="/assets/"> 影响，请求 /assets/videos/intro.mp4
<video src="/videos/intro.mp4"></video> → 不受影响（已是根相对路径）
<video src="https://cdn.example.com/intro.mp4"></video> → 不受影响（已是绝对 URL）
document.querySelector('video').src = 'intro.mp4' → 完全不受影响（JS 动态赋值走运行时解析）

base 标签对 poster 属性、track 元素的影响

poster 是 <video></video> 的属性，<track></track> 是子元素，二者都属于 HTML 硬编码内容，因此全部受 <base> 控制。

例如：<video poster="img/thumb.jpg"><track kind="subtitles" src="subs/en.vtt"></track></video>，在 <base href="https://cdn.example.com/v2/"> 下，实际请求的是：

https://cdn.example.com/v2/img/thumb.jpg
https://cdn.example.com/v2/subs/en.vtt

注意：<track></track> 的 src 必须是同源或配 CORS，否则即使路径正确也会被浏览器拦截；<base> 不改变跨域策略，只改路径拼接逻辑。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

为什么 background-image 中的视频封面图不受 base 影响？

CSS 的 background-image: url(cover.jpg) 完全无视 <base>。它的相对路径始终相对于 CSS 文件所在位置解析，不是 HTML 页面位置，更不走 <base href>。

容易踩的坑：

你把 cover.jpg 放在 /assets/img/，CSS 文件在 /css/app.css，那么 url(img/cover.jpg) 解析为 /css/img/cover.jpg，404
误以为加了 <base href="/assets/"> 就能“统一所有路径”，结果 CSS 背景图仍 404
用 JS 动态设置 element.style.backgroundImage = "url(cover.jpg)" → 同样不走 base，且路径按当前页面 URL 解析（不是 CSS 文件位置）

多级目录部署时 poster 和 track 的路径易错点

SPA 部署到子路径（如 https://example.com/app/v2/）时，<base href="/app/v2/"> 必须与前端构建工具的资源前缀严格一致。否则会出现：

HTML 中 <video poster="img/p.jpg"></video> → 解析为 /app/v2/img/p.jpg（正确）
但 Webpack 的 publicPath 设为 /v2/ → 实际资源在 /v2/img/p.jpg，404
Vite 的 build.base 设为 /app/v2/，又手动写了 <base href="/app/v2/"> → 资源路径可能被拼两次（如 /app/v2//app/v2/img/p.jpg）