HTML5原生不支持FLV播放,因浏览器解码器未集成FLV demuxer及Flash时代解码器;可靠方案是用flv.js基于MSE软解HTTP-FLV流,或用FFmpeg转为MP4/HLS以获原生支持。

HTML5 原生不支持直接播放 .flv 视频, 标签只接受 MP4(H.264+AAC)、WebM、Ogg 等格式。强行写 src="xxx.flv" 会静音失败或显示“无法加载媒体”。
为什么浏览器拒绝播放 FLV
FLV 是 Adobe Flash 时代的封装格式,依赖 Flash Player 解码;HTML5 的 使用系统级或浏览器内置解码器(如 FFmpeg 模块),默认不集成 FLV demuxer 和 Sorenson Spark / VP6 解码器。
- Chrome、Firefox、Safari 都不会识别
type="video/x-flv" - 即使设置
muted、autoplay,控制台仍报MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED - 部分旧版 Edge(EdgeHTML)曾通过 MSE 实验性支持,但已随 Chromium 内核切换而移除
用 flv.js 在浏览器端软解 FLV
唯一可靠方案是使用 Bilibili 开源的 flv.js:它基于 Media Source Extensions(MSE),用 JavaScript 解析 FLV 封装,抽帧后喂给 MediaSource,由浏览器解码 H.264/AAC。
- 仅支持 HTTP-FLV(非 RTMP),需服务端提供持续输出的 FLV 流(如 Nginx-rtmp + http_flv_module)
- 不支持本地
file://协议加载,必须走 HTTP(S) 服务 - 需确保服务端响应头含
Access-Control-Allow-Origin(跨域时) - 基础用法:
服务端转封装比前端解码更稳
如果只是想播已有的 .flv 文件(非直播流),别硬扛 flv.js —— 直接用 FFmpeg 转成 MP4 更省事、兼容性更好:
立即学习“前端免费学习笔记(深入)”;
- 命令示例:
ffmpeg -i input.flv -c:v libx264 -c:a aac -movflags +faststart output.mp4 - 避免用
-c copy直拷贝,FLV 里的 H.264 可能含 B-frame 或非标准 SPS/PPS,MP4 容器需要重写索引 - 转完后直接丢进
,全平台原生支持 - 若需保留低延迟,可考虑生成 HLS(
.m3u8+.ts),但 iOS Safari 对 HLS 支持远好于任何 JS 播放器
真正卡点不在怎么写 HTML 标签,而在 FLV 数据来源是否符合 HTTP-FLV 协议规范——比如缺少正确的 FLV header、timestamp 不单调、音频 AAC ADTS 头缺失等,都会让 flv.js 解析失败且报错极不明确。










