Hello World

 

这一节我们要使用 fijkplayer 库动手写一个最基础的 Flutter 视频播放器了。放心,一点也不难。

本节内容在 安装 一节中新建的 Flutter App 项目 playerapp 中进行修改更新。

验证 Flutter Debug 环境

首先我们验证一下之前新建的 Flutter 项目 playerapp 能够 debug 跑起来。

iOS debug

新建的 Flutter 项目运行 iOS 时需要先在 ios 目录运行 pod install --verbose 安装依赖。

同时,由于一些尚未解决的问题 flutter/issues/14647,暂时不能在 iOS 模拟器进行纹理的渲染,所需要 iOS 真机调试。那么就需要配置 Xcode 开发证书了。

打开 ios/Runner.xcworkspace Xcode 工程,Runner -> targtes -> Runner -> General -> Signing 进行开发证书配置。

安装完依赖并且配置好证书之后,连接上 iOS 设备,在 Xcode 中直接运行项目,或者终端 flutter run,验证 Flutter App 可以顺利运行起来。

Android debug

Android 上没有开发证书问题,也不需要额外的依赖安装。
打开 Android 模拟器,或者连接上 Android 设备,在终端运行 flutter run,验证 Flutter App 在 Android 设备上正确运行。

创建 FijkPlayer

打开 main.dart,将其中的 class _MyHomePageState 修改如下。

class _MyHomePageState extends State<MyHomePage> {
  final FijkPlayer player = FijkPlayer();

  @override
  void initState() {
    super.initState();
    player.setDataSource(
        "https://sample-videos.com/video123/flv/240/big_buck_bunny_240p_10mb.flv",
        autoPlay: true);
  }

  @override
  void dispose() {
    super.dispose();
    player.release();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: FijkView(player: player),
      ),
    );
  }
}

主要修改内容:

  1. 在类 _MyHomePageState 中初始化了一个 FijkPlayer 实例 player
  2. initState 方法中调用 player.setDataSource 接口。
  3. dispose 方法中调用 player.release 接口释放播放器占用的资源。
  4. build 方法中将 FijkView 加入 UI Widgets Tree 中。

简要说明

一个 FijkPlayer 实例绑定一个 playback(native ijkplayer),构造 Fijkplayer 后,对应的 native ijkplayer 也随即初始化。
FijkPlayer 几乎具有所有 ijkplayer 的接口,FijkPlayer 就是对 native C 层 ijkplayer 的一个 dart 包装,接口都保持一致。 FijkPlayer 处理所有播放相关的工作,实际工作都是由 native C 层 ijkplayer 完成,包含检查 dataSource 中的媒体信息,打开解码器和解码线程、打开音频输出设备、将解码后数据输出给音频设备或显示设备。
FijkPlayer 占用较多的内存或资源,在不使用时应该主动调用接口 release 进行释放。

FijkView 只做一件事:显示 FijkPlayer 解码后的视频内容。FijkView 几乎没什么接口,后续如果增加的话也都是和 UI 显示相关。

运行截图

Android iOS
Android demo 运行截图 iOS demo 运行截图

您的支持是我的动力。你可以通过以下方式支持我:

  • 给该项目点赞   给该项目点赞
  • 关注我的 Github   关注我的 Github
微信赞赏码 支付宝
微信赞赏码 支付宝二维码