现代网页开发中,我们通常不使用“浏览器插件”(如 Flash Player 插件)来播放视频,而是使用原生的 HTML5 <video> 标签配合 JavaScript 库。

这是因为:
- Flash 已被淘汰:Adobe 已于 2025 年正式停止开发和分发 Flash Player,所有主流浏览器(Chrome, Firefox, Edge, Safari)都默认禁用并阻止 Flash 内容,出于安全考虑。
- HTML5 视频是标准:HTML5 提供了
<video>标签,无需任何插件即可播放视频,性能更好、更安全、更省电,并且对移动设备支持友好。 - FLV 格式本身也已过时:FLV (Flash Video) 格式是 Flash 时代的产物,现在主流的视频网站普遍使用 MP4 (H.264/H.265 编码) 或 WebM 格式。
如果您想在网页上播放 FLV 视频,正确的做法是使用一个支持 FLV 格式的 HTML5 视频播放器库,而不是去寻找一个已经过时的“浏览器插件”。
推荐方案:使用支持 FLV 的 HTML5 视频播放器库
以下是几个非常流行且好用的 JavaScript 视频播放器库,它们都支持 FLV 格式,并且可以轻松集成到您的网页中。
Video.js (最推荐)
Video.js 是一个功能强大、高度可定制的开源视频播放器,拥有庞大的社区和丰富的插件生态,它对 FLV 的支持非常好。

特点:
- 开源免费,MIT 许可证。
- 跨浏览器、跨平台兼容性极佳。
- 丰富的 API 和插件系统(如广告、画中画、字幕等)。
- 拥有一个功能强大的 Flash 回退组件,可以无缝播放 FLV(虽然 Flash 已淘汰,但这个组件本身是用 JavaScript 模拟的,不依赖浏览器 Flash 插件)。
如何使用:
-
下载或引入: 您可以直接从其官网下载,或者使用 CDN 链接(最简单)。
<!-- 引入 Video.js 样式 --> <link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet"> <!-- 引入 Video.js 核心 --> <script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
-
添加 FLV 播放插件: Video.js 官方有一个
videojs-flvjs插件,用于支持 FLV 播放。<!-- 引入 FLV.js 插件 --> <script src="https://cdn.jsdelivr.net/npm/videojs-flvjs@2.0.2/dist/videojs-flvjs.min.js"></script>
-
编写 HTML 代码: 使用
<video>标签,并为其指定一个 ID。<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup="{}"> <source src="your-video-url.flv" type="video/x-flv"> <!-- 如果浏览器不支持 FLV,可以提供一个 MP4 备用源 --> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>. </p> </video> -
初始化播放器: 在
<script>标签中,告诉 Video.js 这个播放器需要使用 FLV 插件。<script> videojs('my_video_1', { // 确保启用了 flvjs 插件 techOrder: ['flvjs', 'html5'], flvjs: { // flv.js 的配置项 } }, function() { console.log('Good! Video.js is ready.'); }); </script>
完整示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">Video.js FLV Player</title>
<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup="{}">
<source src="your-video-url.flv" type="video/x-flv">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>.
</p>
</video>
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flvjs@2.0.2/dist/videojs-flvjs.min.js"></script>
<script>
videojs('my_video_1', {
techOrder: ['flvjs', 'html5']
});
</script>
</body>
</html>
注意: 将 your-video-url.flv 替换为您自己的 FLV 视频文件链接。
DPlayer
DPlayer 是一个专注于 Bilibili 风格的、简洁而强大的 HTML5 视频播放器,它同样支持 FLV 格式。
特点:
- 界面美观,支持 Danmaku(弹幕)。
- 轻量级,易于使用。
- 支持 HLS 和 FLV。
如何使用:
-
引入 CSS 和 JS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.css" /> <script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
-
创建播放器实例:
<script> const dp = new DPlayer({ container: document.getElementById('dplayer'), autoplay: false, // 自动播放 theme: '#FADFA3', // 主题色 loop: false, // 循环播放 lang: 'zh-cn', // 语言,可选 'en', 'zh-cn' screenshot: true, // 截图功能 hotkey: true, // 热键 preload: 'auto', video: { url: 'your-video-url.flv', // 您的 FLV 视频地址 type: 'auto', // 类型,可选 'auto', 'hls', 'flv', 'dash', 'normal' // type: 'flv' // 也可以显式指定 } }); </script> -
创建容器:
<div id="dplayer"></div>
Plyr
Plyr 是一个现代、简洁且响应式的 HTML5 视频、音频和 YouTube 播放器,它本身不直接处理 FLV,但可以结合 flv.js 使用。
使用方法:
你需要先引入 Plyr,然后像使用 Video.js 一样,通过 Plyr 的 API 或者直接操作底层元素来集成 flv.js,这种方法稍微复杂一些,但如果你喜欢 Plyr 的界面,可以尝试。
总结与对比
| 播放器 | 优点 | 缺点 | 适合场景 |
|---|---|---|---|
| Video.js | 功能最全面,生态最成熟,插件多,文档完善,兼容性好。 | 相对较重,配置项多。 | 需要复杂功能、企业级应用或需要高度自定义的场景。 |
| DPlayer | 界面美观,开箱即用,支持弹幕,轻量级。 | 功能相对 Video.js 较少,定制灵活性稍差。 | 个人博客、视频分享网站,特别是需要弹幕功能的场景。 |
| Plyr | 设计现代,响应式,API 友好。 | 不原生支持 FLV,需要额外集成 flv.js。 |
喜欢其简洁现代设计,且愿意进行二次开发的场景。 |
最终建议
- 首选 Video.js:对于大多数需要播放 FLV 的网页项目,Video.js 是最稳妥、功能最强大的选择。
- 追求简洁美观选 DPlayer:如果你的网站风格偏向现代,并且需要弹幕功能,DPlayer 是一个非常棒的选择。
- 不要寻找“浏览器插件”:请彻底放弃寻找“FLV 插件”的想法,它们已经不适用于现代浏览器。
下载链接: 这些库都提供源代码下载,您可以在它们的官方网站上找到:
- Video.js 官网: https://videojs.com/
- DPlayer 官网/GitHub: https://github.com/MoePlayer/DPlayer
- Plyr 官网/GitHub: https://plyr.io/
希望这个详细的指南能帮助您成功在网页上播放 FLV 视频!
