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

网页 flv 视频播放器 插件下载
(图片来源网络,侵删)

这是因为:

  1. Flash 已被淘汰:Adobe 已于 2025 年正式停止开发和分发 Flash Player,所有主流浏览器(Chrome, Firefox, Edge, Safari)都默认禁用并阻止 Flash 内容,出于安全考虑。
  2. HTML5 视频是标准:HTML5 提供了 <video> 标签,无需任何插件即可播放视频,性能更好、更安全、更省电,并且对移动设备支持友好。
  3. FLV 格式本身也已过时:FLV (Flash Video) 格式是 Flash 时代的产物,现在主流的视频网站普遍使用 MP4 (H.264/H.265 编码) 或 WebM 格式。

如果您想在网页上播放 FLV 视频,正确的做法是使用一个支持 FLV 格式的 HTML5 视频播放器库,而不是去寻找一个已经过时的“浏览器插件”。


推荐方案:使用支持 FLV 的 HTML5 视频播放器库

以下是几个非常流行且好用的 JavaScript 视频播放器库,它们都支持 FLV 格式,并且可以轻松集成到您的网页中。

Video.js (最推荐)

Video.js 是一个功能强大、高度可定制的开源视频播放器,拥有庞大的社区和丰富的插件生态,它对 FLV 的支持非常好。

网页 flv 视频播放器 插件下载
(图片来源网络,侵删)

特点:

  • 开源免费,MIT 许可证。
  • 跨浏览器、跨平台兼容性极佳。
  • 丰富的 API 和插件系统(如广告、画中画、字幕等)。
  • 拥有一个功能强大的 Flash 回退组件,可以无缝播放 FLV(虽然 Flash 已淘汰,但这个组件本身是用 JavaScript 模拟的,不依赖浏览器 Flash 插件)。

如何使用:

  1. 下载或引入: 您可以直接从其官网下载,或者使用 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>
  2. 添加 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>
  3. 编写 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>
  4. 初始化播放器:<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。

如何使用:

  1. 引入 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>
  2. 创建播放器实例:

    <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>
  3. 创建容器:

    <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 喜欢其简洁现代设计,且愿意进行二次开发的场景。

最终建议

  1. 首选 Video.js:对于大多数需要播放 FLV 的网页项目,Video.js 是最稳妥、功能最强大的选择。
  2. 追求简洁美观选 DPlayer:如果你的网站风格偏向现代,并且需要弹幕功能,DPlayer 是一个非常棒的选择。
  3. 不要寻找“浏览器插件”:请彻底放弃寻找“FLV 插件”的想法,它们已经不适用于现代浏览器。

下载链接: 这些库都提供源代码下载,您可以在它们的官方网站上找到:

希望这个详细的指南能帮助您成功在网页上播放 FLV 视频!