HTML中source标签在video标签内部的加载优先级机制详解-html教程-PHP中文网

浏览器只认第一个能解码的source，即首个type声明正确且实际编解码器被支持的文件；type属性必须准确，否则不发起请求；动态替换source后须调用load()；preload="metadata"为首屏最优解。

html中source标签在video标签内部的加载优先级机制详解

浏览器只认第一个能解码的，不是“谁写在前面就加载谁”

浏览器加载 <source></source> 时，根本不会管你文件体积小不小、码率高不高、是不是新编码——它只找“第一个自己能解码成功”的。这个“能解码”包含两层：一是 type 声明的 MIME 类型被支持，二是实际文件里的视频/音频编解码器（比如 H.264、VP9）设备真能硬解或软解。

常见错误现象：<source src="vid.mp4" type="video/mp4"></source> 放第一个，但视频其实是 H.265 编码；Safari 和多数安卓机直接跳过，继续往下找，哪怕第二个 <source src="vid.webm" type="video/webm"></source> 是 VP9，也得等它加载完才播——首帧延迟翻倍。

MP4 文件必须用 H.264 Baseline/Main Profile + AAC-LC，FFmpeg 导出加 -profile:v baseline -level 3.0 -c:a aac
WebM 推荐用 type="video/webm"，不带 codecs 参数更稳；VP9 的 codec 字符串（如 vp09.00.10.08）稍有偏差，Safari 就返回空字符串
AV1 MP4（type="video/mp4; codecs="av01.0.05M.08""）必须放最后，Safari 16+ 才识别，且 iOS 全系不支持

type 属性写错或缺失，等于把 source “藏起来”

type 不是可选装饰，它是浏览器决定“要不要发请求”的开关。写错或漏掉，哪怕文件真实存在、格式正确，Chrome/Firefox/Safari 都可能完全不发起网络请求——DevTools 的 Network 面板里根本看不到那个 src 的请求，只留个黑屏，控制台也没报错。

典型错误：

type="mp4"（缺 video/ 前缀）→ 浏览器当无效值跳过
type="video/mpeg"（对应 .mpeg 文件，不是 .mp4）→ 即使文件是 MP4 也无视
type="video/mp4; codecs="h264""（标准是 avc1，不是 h264）→ Safari 返回空字符串
服务器返回 Content-Type: text/plain，哪怕 type="video/webm" 写对了，Safari 也静默跳过

验证方式：用 curl -I https://example.com/vid.mp4 看响应头，必须是 Content-Type: video/mp4；再用 ffprobe vid.mp4 确认 Stream 是 Video: h264 (Baseline)。

动态替换 source 后必须显式调用 load()，否则卡在旧状态

DOM 上改了 <source></source>，浏览器不会自动重载。只清空 <video></video> 子节点再 append 新的 <source></source>，界面会卡在上一个视频最后一帧，进度条不动，时间也不更新。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

安全做法三步走：

先 video.pause()
再替换所有 <source></source>（或清空后重新 append）
然后必须 video.load() —— 它是异步的，后续操作（比如监听 loadedmetadata）得绑定事件，不能紧跟着写

注意：load() 不保证立刻触发播放，也不重置 currentTime；如果想从头播，得在 loadedmetadata 里手动设 video.currentTime = 0。

preload="metadata" 是首屏视频的默认最优解

preload 控制的是“页面加载阶段下载多少”，不是“要不要加载”。设了 autoplay，浏览器通常忽略 preload；loading="lazy" 对 <video></video> 完全无效，写了等于没写。

三个值的实际行为：

none：啥都不下，点播放才发请求 → 适合大视频、低带宽场景
metadata：只下头部（时长、分辨率、封面图所需信息）→ 首屏视频推荐这个，控件能立刻渲染，LCP 友好
auto：允许下尽可能多 → 小体积 banner 动画可用，但移动端 Safari 可能降级为 metadata，且不保证真下多少

最容易被忽略的一点：所有 <source></source> 都嵌套在 <video></video> 内部才生效。单独写在顶层，控制台报 DOMException: The element has no supported sources，播放区直接空白——这种错误在模板拼接或 SSR 渲染时特别容易漏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！