Mosaic products documentation: Concepts, API Reference, Technical articles, How-to, Downloads and tools

Flutter based Player

Better Player is a flutter based player which supports both Android and iOS.

Integrating Flutter based Better Player for Widevine Playback on Android with Axinom DRM

Prerequisites

  1. Download and install the Android Studio.

  2. Download and install Flutter.

  3. Setup Android Studio to use Flutter:

    1. Install Flutter plugin in Android Studio (launch Android Studio → Plugins → Marketplace → search for “Flutter“ and install it)

      flutter plugin install

Create a new flutter project in Android Studio.

  1. Select “New Flutter Project“ in the Android Studio welcome screen. It should appear there after installing the Flutter plugin and restarting Android Studio.

  2. Android Studio might ask you to define Flutter SDK path. Set it as the path where you placed Flutter SDK during flutter installation.

  3. Finally, fill the necessary fields related to the project like its name and location. Since we want to create an Android application then select “Application“ as Project type and tick only the “Android“ box in the Platforms menu. Android language could be either Java or Kotlin, both will work fine.

    new flutter project create

Better player installation.

  1. Install and import Better player

  2. pubspec.yaml file can be located using Android Studio’s Project window (usually located at the top left corner of the screen):

    pubspec file
  3. Place “import 'package:better_player/better_player.dart';“ in lib/main.dart. This is where we will be implementing the usage of Better Player in our simple sample project.

  4. “compileSdkVersion” and enabling multidex can be done in app/module level build.gradle file (android/app/build.gradle):

    sdk version
    enable multidex

Better player application implementation.

  1. In lib/main.dart file there should be classes like MyApp, MyHomePage, _MyHomePageState. We will only modify _MyHomePageState by adding initState() method to initialize BetterPlayerController and also change the Widget build method to create a BetterPlayer widget.

  2. In initState() method we create BetterPlayerDataSource for the BetterPlayerController. BetterPlayerDataSource is a representation of data source which will be player in Better Player. Here we can set url of the video. Also an important part here is the BetterPlayerDrmConfiguration of the BetterPlayerDataSource. In BetterPlayerDrmConfiguration we specify the drmType as BetterPlayerDrmType.widevine, licenseUrl as "https://drm-widevine-licensing.axprod.net/AcquireLicense" and adding request headers containing “X-AxDRM-Message“ with the value depending on the video.

  3. In the Widget build method we create a BetterPlayer widget which takes our newly initialized BetterPlayerController as an argument.

  4. Here is how MyHomePageState class should look like.

    myhomepagestate class
    aspect ratio
  5. Compile the android project and play it in a desired device.

Integrating Flutter based Better Player for FairPlay playback on iOS with Axinom DRM

This is a simple guide with minimal steps to play a video with better player on iOS.

Prerequisites

  1. Download and install the Flutter.

  2. Download and install your preferred IDE for Flutter development. In this example we will be using Android Studio. More info about suitable editors and how to set them up can be found here.

  3. Download and install Xcode.

  4. Checkout Better Player source code from GitHub.

Note
Please do the below code changes in the Better Player code itself to see a successful playback.

Required changes in the codebase

  1. The easiest way to test a protected video using Better Player source code is to modify the "constants.dart" file (betterplayer/example/lib/constants.dart) and set new values to "fairplayHlsUrl", "fairplayCertificateUrl" and "fairplayLicenseUrl" according to the video to be tested: