HTML5视频能直接播放的前提是编码组合、容器与元数据三者匹配：必须用H.264+AAC（MP4）、VP8/VP9+Opus（WebM）等浏览器原生支持的组合，且moov atom前置、关键帧合理，并通过多source兜底确保兼容性。

HTML5 视频能直接播放，前提是格式被浏览器认得。核心不是“转成MP4”这么简单，而是让视频编码、音频编码和容器三者匹配主流浏览器的解码能力，并把关键元数据（比如播放头）放在文件开头。

必须选对编码组合

MP4 容器本身不等于兼容 HTML5，真正起作用的是里面装的内容： - 视频编码推荐 H.264（Baseline 或 Main Profile），几乎所有浏览器都支持 - 音频编码用 AAC（48kHz 采样率），避免 MP3 在某些 Safari 版本里无声 - WebM（VP8 + Vorbis）适合 Firefox/Chrome，但 Safari 基本不认 - Ogg（Theora + Vorbis）已逐步淘汰，新项目不建议使用

只改后缀名或单纯封装进 MP4 容器，若内部是 AV1、HEVC 或 AC3 编码，仍会播放失败。

封装时关键参数不能省

生成的 MP4 文件要能在网页里拖动、秒开、不卡顿，必须满足两点： - moov atom 前置：加 -movflags +faststart，否则浏览器得下载完整文件才开始播 - 关键帧间隔合理：GOP 设置在 2 秒内（如 -g 48 对应 24fps），否则快进/暂停响应迟钝

用 ffprobe 检查输出文件：
若提示 moov atom not found，说明没写完就中断了；
若 duration 显示为空或为 0，大概率是流未正常结束或编码异常。

多格式兜底更稳妥

单靠 MP4 并不能覆盖所有场景，尤其面对老旧设备或企业内网环境： - 在 <video> 标签里按优先级提供多个 <source> - 推荐顺序：mp4 → webm → （可选）ogg - type 属性必须写准确，例如 type="video/mp4"，不能只写 mp4

浏览器会按顺序尝试加载，直到找到第一个支持的格式，用户无感知。

Article To Html

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

下载

直播流转点播要分步处理

HLS（.m3u8）或 RTMP 流不能直接 ffmpeg -i 转 MP4： - 先完整拉取并保存为 TS 分片或临时流文件，再合并封装 - 强制加 -c copy 可避免重编码，但要求源流本身就是 H.264+AAC - 若源流含加密、跳变或非标准 GOP，就得重编码：-c:v libx264 -crf 23 -c:a aac

生成后务必检查 MIME 类型是否为 video/mp4，Nginx/Apache 需配置 types 映射，否则 404 或无法解析。

立即学习“前端免费学习笔记（深入）”；