Hello World

This section is about writing a basic and easiest Flutter video player using fijkplayer. Take it easy.

Let’s continue with the project playerapp created in last install section.

Test Debug Env

Running app in device or simulator is very cool. You can see what happend once you change the source code.
Firstly, we should make sure we have a work-welled develop environment to Run / Debug app in device or simulator.

iOS debug

It’s better to run pod install --verbose in ios folder once we change flutter dependencies or the first time we create an Flutter app.

Well, because of some unresolved issues flutter/issues/14647, Texture can not be renderer on iOS simulator. So to checking if a video player works well, we must use a real iOS devide. Running app on real iOS deviee from xcode need code sign.

open ios/Runner.xcworkspace in Xcode, configure your certificate on the path Runner -> targtes -> Runner -> General -> Signing.

After install dependencies and configure usable certificate, connect iOS device, run the Runner targets in Xcode, or flutter run in terminal. You can see the app launched on your device successfully.

Android debug

Debug an android app dose not need certificate, and dependencies is installed automatically by android studio and gradle.
Open Android Virtual Device or connect to real Android devide, type flutter run in terminal, you will see the app launched on your Android device successfully.

Create FijkPlayer

open main.dart, edit and update class _MyHomePageState as bellow.

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),
      ),
    );
  }
}

important changes:

1. Initialize a FijkPlayer instance player in class _MyHomePageState.
2. Call the player.setDataSource API in the initState method.
3. Call the player.release API in the dispose method to release the resources occupied by the player.
4. Add FijkView to the UI Widgets Tree in the build method.

Brief description

A FijkPlayer instance is bound to a playback (native ijkplayer). After the Fijkplayer is constructed, the corresponding native ijkplayer is also initialized. FijkPlayer has almost all the APIs of ijkplayer. FijkPlayer is a dart wrapper for the native C layer ijkplayer, and the APIs are consistent.
FijkPlayer handles all playback-related work. The actual work is done by the native C-layer ijkplayer, which includes checking the media information in the dataSource, opening the decoder and decoding threads, turning on the audio output device, and outputting the decoded data to the audio device or display device. FijkPlayer occupies a lot memory or resources, and should call the API release explicitly for release when not in use.

FijkView only does one thing: display the decoded video content of FijkPlayer.
FijkView has almost no extra API. If new API is added later, it is also related to the UI display.

Screenshots

Android	iOS