▶M3U8 SPACE

Flutter 视频播放插件: 为 Flutter 应用添加视频播放功能

Flutter 视频播放插件: 为 Flutter 应用添加视频播放功能

Flutter 官方框架不直接提供视频播放组件,而是通过 video_player 插件支持视频播放。此插件将视频解码工作交给各平台的原生播放器,适用于 MP4 和 HLS 格式的视频播放。

在 Flutter 官方框架中并没有内置视频组件,与 Image() 和 Text() 等基础组件不同,视频播放组件需要通过插件来实现。其中,Flutter 团队维护的官方插件 video_player 是主要的选择之一。这个插件将实际的视频解码工作委托给各个平台的原生播放器。

由于这种设计,许多技术论坛会讨论 Flutter 是否真的能够播放视频。实际上,Flutter 完全支持视频播放。不过,video_player 插件本身功能较为基础,而在此基础上构建的社区插件经过了多次迭代。

截至2026年9月,video_player 2.14 版本允许用户手动选择 HLS 质量等级,同时 better_player 也恢复了积极维护。下面提供了一套适用于 MP4 和 HLS 播放的代码示例,以及开发人员常遇到的问题解决方案。

Flutter 视频播放插件通过包装各平台的原生媒体引擎,并通过 Dart 控制器将其暴露出来,从而在 Flutter 单元树中渲染视频帧。

官方插件 video_player 由 flutter.dev 发布,每月下载量约为330万次,带有 Flutter 喜爱的徽章。Flutter 负责绘制用户界面,但不进行 H.264 视频编码或解析 m3u8 播放列表。这些任务由各操作系统的播放器完成,插件将解码后的帧作为纹理传回到 Flutter。

这种设计解释了多数 Flutter 视频播放器的行为,包括格式支持、DRM、HLS 问题以及编码限制,都源自底层引擎。

如果视频在 iOS 上无法播放,通常是 AVPlayer 无法处理该视频。如果在 Android 上能播放而在 Chrome 浏览器中无法播放,那么问题可能出在浏览器上。

每个 video_player 设置都包含两个部分:

控制器会暴露一个 VideoPlayerValue 对象,提供当前播放位置、总时长、缓冲范围、宽高比以及错误状态等信息。这是一个 ValueNotifier,因此可以在播放状态改变时重建用户界面。

控制器可以从四种来源创建:

官方插件提供视频播放功能,但不包括用户界面、DRM、缓存或桌面支持,这些功能通常由其他插件来补充。

以下是主要选项的当前对比情况:

版本信息基于2026年9月25日 pub.dev 的检查结果。

除非有特定原因,否则推荐从 video_player 开始。它是下载量最大的 Flutter 视频插件,由 Google 维护,并且与 Flutter 新版本保持同步。版本 2.14.0 需要 Flutter 3.44 或更高版本。

最近的发布版本填补了以前推动开发者转向其他插件的一些空白:

缺点是插件不会提供控制界面,因此你必须自己创建播放按钮、进度条和全屏切换等功能。

Chewie 提供了一个 UI 层,它接受 VideoPlayerController 并封装在 Material 或 Cupertino 控件中,提供全屏、播放速度、字幕和章节等功能。

因为它是基于 video_player 插件之上构建的,所以你将继承其格式支持和错误。Chewie 的 README 文件明确指出,从播放器抛出的 PlatformExceptions 应归因于 video_player,而不是 Chewie。

对于大多数应用来说,这是正确的权衡。你可以在大约10行代码中获得一个完成的用户界面,同时保留官方引擎。

media_kit 用 libmpv 替换了原生播放器,使得在 Android、iOS、macOS、Windows、Linux 和 Web 等所有平台上的行为保持一致。

这是其主要吸引力所在。媒体库是 Flutter 论坛上推荐在 Windows 或 Linux 上使用的 Flutter 视频播放器。它适用于建构像 TikTok 风格的视频流,单一实例可以打开新的视频源而无需销毁。

缺点是应用包变大(libmpv 需要包含在应用中),没有 DRM 支持,且需要单独添加 media_kit、media_kit_video 以及 media_kit_libs_video。media_kit 仓库仍然活跃,截至2026年8月仍有提交更新,尽管最近一次 pub.dev 发布是在2025年12月。

相关视频

https://example.com/live/stream/master.m3u8