HTML5原生不支持FLV播放，因浏览器解码器未集成FLV demuxer及Flash时代解码器；可靠方案是用flv.js基于MSE软解HTTP-FLV流，或用FFmpeg转为MP4/HLS以获原生支持。
HTML5 原生不支持直接播放 .flv 视频，<video> 标签只接受 MP4（H.264+AAC）、WebM、Ogg 等格式。强行写 src="xxx.flv" 会静音失败或显示“无法加载媒体”。
为什么浏览器拒绝播放 FLV
FLV 是 Adobe Flash 时代的封装格式，依赖 Flash Player 解码；HTML5 的 <video> 使用系统级或浏览器内置解码器（如 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（跨域时） - 基础用法：
<script src="https://cdn.jsdelivr.net/npm/flv.js@1.8.2/dist/flv.min.js"></script> <video id="videoElement" controls></video> <script> const flvPlayer = flvjs.createPlayer({ container: document.getElementById('videoElement'), url: 'http://your-server/live/stream.flv', isLive: true, enableStallDetection: false, }); flvPlayer.attachMediaElement(); flvPlayer.load(); </script>
服务端转封装比前端解码更稳
如果只是想播已有的 .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 容器需要重写索引 - 转完后直接丢进
<video src="output.mp4">，全平台原生支持 - 若需保留低延迟，可考虑生成 HLS（
.m3u8+.ts），但 iOS Safari 对 HLS 支持远好于任何 JS 播放器
真正卡点不在怎么写 HTML 标签，而在 FLV 数据来源是否符合 HTTP-FLV 协议规范——比如缺少正确的 FLV header、timestamp 不单调、音频 AAC ADTS 头缺失等，都会让 flv.js 解析失败且报错极不明确。
