要在HTML上播放AVI格式的视频，看似简单却最容易踩坑，因为HTML5的video标签原生不支持AVI容器，即便你费尽心思写出正确的代码，浏览器也只会报错，目前最稳定且被广泛采用的方案是：提前将AVI文件转换为MP4格式，或者配合后台转码服务，使用支持多格式的第三方播放器库如Video.js，如果你希望在网页中通过input上传AVI并即时播放，则需要借助浏览器的FileReader API读取本地文件，配合JavaScript解码器但这通常只适用于小文件且兼容性有限。参考2
为什么HTML5原生不支持AVI？
AVI是一种老旧的容器格式，它内部可以封装多种编码，常见的是DivX和Xvid，还有MPEG-4 Visual等，而HTML5 video标签明确支持的编码只有H.264（MP4容器）、VP8（WebM容器）和Ogg Theora（OGG容器）,这两者完全不在一个频道上。
容器格式不匹配是根本原因。 即使你把AVI文件后缀改成.mp4，浏览器依然会尝试按MP4容器解析，最终失败，html上播放avi”这个需求，本质上是一个编码转换需求,而不是写代码就能绕过去的。
解决“html上播放avi”的三种主流方法
转换格式（最推荐）
这是兼容性最好、实现成本最低的方式，你只需要在服务器端或用户上传时,通过FFmpeg等工具将AVI转为MP4。
具体操作步骤：
- 安装FFmpeg（如果服务器是Linux，包管理器直接安装；Windows用户下载exe后配置环境变量）。
- 在命令行执行：
ffmpeg -i input.avi -c:v libx264 -c:a aac -movflags +faststart output.mp4
-movflags +faststart参数能优化MP4,使其适合网页流式播放。参考2 - 将生成的MP4文件通过HTML5 video标签播放：
<video controls> <source src="output.mp4" type="video/mp4"> 您的浏览器不支持视频播放。 </video>
优点： 兼容所有现代浏览器，质量可控，一次编码永远生效。
缺点： 需要额外空间和时间,不适合实时播放。
使用Flash播放器（已淘汰，但仍有遗留场景）
在2020年之前，Flash是播放AVI的主力，Adobe Flash Player允许通过<object>和<embed>标签调用本地播放器或插件，但Flash已于2020年底停止支持,现代浏览器默认禁用。
如果你只是为了兼容老旧设备或内网环境，可以尝试以下代码：
<object classid="clsid:67DABFBF-D0AB-41fc-9BA7-9B0C0B2C2B5F" width="640" height="480"> <param name="src" value="video.avi" /> <embed src="video.avi" type="video/avi" width="640" height="480" /> </object>
但要注意： 这种写法在Chrome、Edge、Firefox最新版中几乎无效，行业共识认为，Flash方案已不可靠,不应作为主力推荐。
借助JavaScript播放器库+后台实时转码
如果你必须在网页中播放用户上传的AVI，且不想让用户等待下载完成，可以使用Video.js或DPlayer等库，配合后台转码服务（如FFmpeg.wasm浏览器端转码，或Node.js流式转码）。
以Video.js为例：
- 引入Video.js库：
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" /> <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
- 但Video.js本身不直接支持AVI，你需要先通过后台接口将AVI转成HLS或DASH流，再通过Video.js播放。
- 前端请求转码接口，获取m3u8文件地址,然后赋值给video标签的src。
优点： 用户体验流畅，实时播放。
缺点： 开发成本高，需要搭建转码服务器,延迟和带宽消耗较大。
html input type file 上传AVI并播放的实操
很多用户搜索“html上播放avi _HTML输入”时，其实是希望用户通过input选择本地的AVI文件，然后直接在网页上预览,这个场景在需要上传视频的系统中很常见。参考2
但现实是： 浏览器无法直接播放本地AVI，你只能读取文件二进制数据，然后用JavaScript尝试解码，目前能用的库有Broadway.js（仅支持H.264）和
ffmpeg.js（浏览器端FFmpeg），但解码AVI中的DivX编码非常困难,几乎不可能稳定实现。
更实用的做法是： 提示用户先将AVI转换为MP4再上传,或者在后台转码后返回可播放的URL。
前端代码示例（仅用于展示上传交互，实际播放仍然需要转换）：
<input type="file" id="videoUpload" accept=".avi, video/avi" />
<video id="preview" controls width="600"></video>
<script>
document.getElementById('videoUpload').addEventListener('change', function(e) {
const file = e.target.files[0];
const url = URL.createObjectURL(file);
const video = document.getElementById('preview');
video.src = url;
// 注意：浏览器会尝试播放，但很可能失败，提示格式不支持
});
</script>
这段代码仅仅是把文件以临时URL赋给video标签，如果浏览器不支持该格式，会显示错误。多数情况下，用户会看到“无法播放视频”的提示。 你需要在界面中加入格式检查,并引导用户选择正确的文件。
“html5播放avi不行怎么办”常见问题排查
如果你已经写好了代码，但AVI就是播不出来,可以按以下步骤排查：
- 检查文件编码：用工具如MediaInfo查看AVI的真实视频编码，如果是H.264，那只是容器问题，可以尝试将文件后缀改为.mp4，但成功率很低，如果是DivX或Xvid,HTML5绝对不支持。
- 检查浏览器控制台：打开F12,查看是否有“不支持格式”或“解码错误”的日志。
- 检查引入的播放器库：有些库声称支持AVI，但实际依赖Flash或VLC插件,现代浏览器上这些插件无法加载。
- 尝试使用转换工具：如果一定要在网页播放,转换是唯一出路。
一种很少人知道的“偏方”： 如果AVI文件的视频编码是Motion JPEG（MJPEG），部分浏览器（如Chrome）可以播放，但MJPEG的AVI非常少见,常规视频几乎不会遇到。
不同方案对比：成本、兼容性、易用性
| 方案 | 兼容性 | 是否需要服务器 | 转换成本 | 实时性 |
|---|---|---|---|---|
| 转换格式为MP4 | 极好（所有现代浏览器） | 不必须（可本地转换） | 低（一次转换） | 否（需提前准备） |
| Flash播放器 | 差（已淘汰） | 不必须 | 无 | 是 |
| 后台实时转码+流播放 | 好（取决于播放器） | 必须 | 高（需服务器资源） | 是 |
| 浏览器端解码（JavaScript） | 极差（仅支持特定编码） | 不必须 | 低但性能差 | 是 |
Q&A：html上播放avi”的常见疑问
问：html上播放avi格式的代码怎么写？
答：直接将AVI文件放在video标签的src里是不行的，你需要先转换格式，如果你坚持用AVI，可以尝试嵌入VLC Web Plugin（已废弃）或使用Flash，但它们在2026年的浏览器上几乎无法工作。最靠谱的代码是转换后的MP4播放代码，如下：
<video controls> <source src="converted.mp4" type="video/mp4"> </video>
问：为什么我的avi文件在html5中播放不了？
答：因为AVI默认封装的是DivX或Xvid编码，而HTML5 video标签只支持H.264、VP8和Ogg Theora，这是编码不兼容，不是代码问题。解决方法是使用FFmpeg将其转换为MP4（H.264编码），然后再用video标签播放。
问：有没有插件可以直接在浏览器播放avi而不转换？
答：过去有VLC ActiveX插件和QuickTime插件，但现代浏览器已禁用NPAPI插件，Chrome和Firefox均不支持。目前没有无需额外插件就能直接播放AVI的通用方案。 如果你在内网环境且能控制客户端，可以考虑使用旧版浏览器配合VLC插件，但安全风险极高,不推荐。
最终结论： 在2026年的技术背景下，想在HTML上播放AVI，最直接、最可靠的方式就是转换格式，不要执着于寻找原生支持,那只会浪费时间和精力。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/531478.html
