HTML5的<video>标签原生不支持FLV格式，仅支持MP4、WebM和Ogg；需转码为MP4或WebM，或使用flv.js等JS播放器通过MSE实现播放。
video标签原生不支持FLV格式
HTML5的<video>标签只支持MP4（H.264+AAC）、WebM（VP8/VP9+Opus/Vorbis）、Ogg（Theora+Vorbis）三种封装格式，FLV不在其中。直接写<video src="xxx.flv"></video>会显示“无法播放此视频”或空白，控制台通常报错DOMException: The element has no supported sources。
必须转码为MP4或WebM才能用原生video标签
最稳妥的做法是把FLV转成浏览器能直接解码的格式。FFmpeg是最常用工具：
ffmpeg -i input.flv -c:v libx264 -c:a aac -movflags +faststart output.mp4
注意几个关键点：
-
-c:v libx264：强制H.264编码（iOS/Safari必需） -
-c:a aac：音频必须是AAC，MP3在部分浏览器（如Safari）可能静音 -
-movflags +faststart：把moov atom移到文件开头，实现边下边播 - 不要用
-qscale或-crf过高值，否则首帧加载慢甚至卡住
想保留FLV就得用JS播放器（不是video标签）
如果FLV来自实时流（比如直播推流），或者你无法转码，就得放弃<video>，改用JavaScript播放器。主流选择是flv.js：
立即学习“前端免费学习笔记（深入）”；
它通过MediaSource Extensions (MSE)把FLV切片喂给<video>元素，但本质是JS解析+喂数据，不是靠浏览器原生支持。
基本用法：
<video id="videoElement" controls></video>
<script src="flv.min.js"></script>
<script>
const player = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/live/xxx.flv',
isLive: true,
enableWorker: true,
enableStallMonitor: true,
});
player.attachMediaElement(document.getElementById('videoElement'));
player.load();
</script>
常见坑：
-
flv.js不支持HTTP范围请求（Range），所以不能拖拽进度条——除非服务端支持FLV分片（如nginx-http-flv-module） - 必须用HTTPS或localhost调试，Chrome/Firefox对
file://协议禁用MSE -
isLive: true时，seek()无效；设为false则需服务端支持FLV索引（meta tag）
别指望用<source>加type="video/x-flv"绕过限制
有人试过这样写：
<video> <source src="a.flv" type="video/x-flv"> </video>
没用。type属性只是提示，浏览器仍会检查实际编码和容器是否支持。所有主流浏览器都会忽略video/x-flv并跳过该<source>。
真正起作用的是canPlayType()返回值：videoEl.canPlayType('video/x-flv')永远是""（空字符串），表示不支持。
FLV是Adobe遗产格式，现代Web已弃用。硬要兼容，要么转码，要么引入JS播放器——没有第三条路。
