浏览器按顺序试播首个可解码的source，格式须按兼容性从高到低排列；type必须带codecs参数，mp4（h.264+aac）优先，ios safari强制首源为h.264 mp4。
用 <source></source> 标签为 <video></video> 或 <audio></audio> 提供多个格式，核心是让浏览器按顺序“试播”，选第一个它能解码的——不是挑最好的，而是挑第一个能用的。
格式顺序必须按兼容性从高到低排
浏览器严格从上往下检查 <source></source>，遇到第一个 type 被识别、资源返回 HTTP 200、且能成功解码的就立刻使用，后面全部跳过。
- 视频推荐顺序：MP4（H.264 + AAC）→ WebM（VP9 + Opus）→ （Ogg 可省略）
- 音频推荐顺序：MP3 → WAV → Ogg（Vorbis）→ Opus（WebM）
- iOS Safari 强制要求第一个可播放的
<source></source>必须是 H.264 编码的 MP4，否则可能静音或报错
Type 属性必须写准，不能省略也不能写宽泛
type 不是装饰，它是浏览器快速跳过不支持格式的关键。写错或漏掉，会导致无效请求、回退失效，甚至卡在 loading 状态。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法要带 codecs 参数，例如：
type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" - 避免只写
type="video/mp4"—— 这样浏览器无法判断编码是否支持，可能白请求一次 - MP4 文件若用了 AV1 编码，却写
type="video/mp4"，旧版 Safari 会忽略；应改用type="video/mp4; codecs="av01.0.05M.08""并放在最后
结构要规范，还得留降级提示
所有 <source></source> 必须嵌在 <video></video> 或 <audio></audio> 内部，且不能和元素自身的 src 属性共存。
- 每个
<source></source>的src必须指向真实可访问的文件，路径支持相对或绝对 URL - 在所有
<source></source>之后、之前，写一段简明文字，比如“您的浏览器不支持视频播放”，这是给不支持 HTML5 媒体标签的老设备或屏幕阅读器用的 - 不要用 JavaScript 动态插入
<source></source>，这可能绕过浏览器原生的格式探测逻辑
必要时加 JS 监听做兜底处理
自动回退虽可靠，但网络中断、文件损坏、解码失败等极端情况仍可能发生。监听 error 事件可及时响应：
- 在
<video id="myVideo"></video>上绑定error事件，触发时提示用户或加载备用内容 - 也可监听
canplaythrough判断是否真正就绪，避免“看似加载完成实则卡顿” - 注意：仅靠
<source></source>无法实现分辨率自适应或带宽切换，这类需求得用 MSE + hls.js/dash.js
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
