type属性必须带codecs参数才真正起作用，仅写type="video/mp4"等同于没写，浏览器无法判断内部编码是否支持，会发起请求后才发现解码失败；真正起作用的是type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""等完整声明，使浏览器在请求前完成MIME类型与编解码器双层校验。
type属性必须带codecs参数才真正起作用
只写 type="video/mp4" 等同于没写——浏览器无法据此判断内部编码是否支持，会照常发起请求，等下载完才发现解码失败。Network 面板里能看到 200，但视频黑屏、无报错、error 事件也不触发（静默跳过）。
真正起作用的是带 codecs 的完整声明，例如：
<source src="vid.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
它让浏览器在发起网络请求前就完成“MIME 类型 + 编解码器”双层校验。不匹配的 <source> 直接被跳过，连请求都不会发。
-
avc1.42E01E表示 H.264 Baseline Profile（iOS Safari 唯一认的起点） -
mp4a.40.2表示 AAC-LC 音频（不是aac或mp4a） - 大小写敏感：
vp9可行，VP9或vp09都不行 - 用
ffprobe -v quiet -show_entries stream=codec_name,profile -of csv video.mp4核实实际编码参数
iOS Safari 对第一个 source 有硬性三条件
把 <source src="vid.webm" type="video/webm"> 放第一位？真机上大概率白屏、静音、自动播放被禁，甚至抛 NotAllowedError。WebKit 不 fallback，它直接判定整个 <video> 不可用，后续所有 <source> 都不会加载。
立即学习“前端免费学习笔记（深入）”；
必须同时满足：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 位置第一：
<source>必须是<video>内的第一个子元素 - 编码合规：H.264 Baseline 或 Main Profile（推荐
-profile:v baseline -level 3.0），AAC-LC 音频（-c:a aac -b:a 128k） -
type逐字符一致：服务器返回的Content-Type响应头必须和type属性值完全相同，包括空格、逗号、引号位置。例如你写type="video/mp4; codecs="avc1.42E01E, mp4a.40.2""，但服务端返回video/mp4; codecs="avc1.42E01E,mp4a.40.2"（少空格），Safari 就当它不匹配
多个 source 的选择顺序和 fallback 逻辑
浏览器不是按“谁文件小/谁画质高”选，而是从上到下检查每个 <source>：先看 type 是否被支持，再验证实际编解码器能否解码。首个两者都满足的即被选用。
常见错误现象：视频黑屏，DevTools 的 Network 面板里对应 <source> 请求根本没发出——说明浏览器压根没尝试加载它。
- type 必须是标准 MIME 类型：
"video/mp4"、"video/webm"、"video/ogg"，不能写成"mp4"或"video.mp4" - 移动端 Safari 对
video/webm完全不识别，写了也白写；Android Chrome 则基本都支持 mp4 和 webm - 推荐顺序：
webm (VP9/AV1)→mp4 (H.264)→ogg (Theora)，兼顾现代兼容与降级能力 - 不要依赖
media属性做格式分流（如media="(min-width: 768px)"），它只控制是否下载，不改变解码行为
动态替换 source 后必须显式调用 load()
DOM 上改了 <source>，浏览器不会自动重载视频流——哪怕你清空 <video> 子节点再 append 新的 <source>，也得显式触发 load()，否则旧缓冲、旧状态全保留。
容易踩的坑：
- 只改
src属性（绕过<source>），看似省事，但会丢失多格式 fallback 能力 - 只换
<source>不load()，界面卡在上一个视频最后一帧，控制条时间也不更新 - 安全做法：先
video.pause()，再替换<source>，然后video.load()，最后视需video.play() -
load()是异步的，后续操作（如监听loadedmetadata）要绑定在事件上，不能紧跟着写
最常被忽略的一点：本地开发用 file:// 协议时，type 会被完全忽略，所有 <source> 都失效——必须走 HTTP(S) 服务才能测试真实行为。
