THEOplayer Flutter SDK: A Comprehensive Guide

Published on by Flutter News Hub

THEOplayer Flutter SDK: A Comprehensive Guide

Overview

The THEOplayer Flutter SDK empowers developers to integrate seamless video playback into their Flutter applications on Android, iOS, and HTML5. With this SDK, you can easily incorporate a high-performance video player into your apps, offering your users an exceptional video experience.

Prerequisites

To utilize the THEOplayer Flutter SDK, you'll need:

  • THEOplayer licenses for each platform (iOS, Android, HTML5)
  • Dependency management tools: Gradle & Maven (Android), Cocoapods (iOS), and npm (Web)

Getting Started: Creating a Minimal Demo App

Android

  1. Add the following to your build.gradle:
dependencies {
  implementation 'com.google.android.exoplayer:exoplayer-core:2.+@aar'
  implementation 'com.theoplayer:flutter_theoplayer_sdk:+'
}
  1. Initialize THEOplayer in your MainActivity:
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  THEOplayerPlugin.registerWith(this)
}

iOS

  1. Add to your Podfile:
target 'Runner' do
  pod 'THEOplayerFlutterSDK', '~> 2.+'
end
  1. Install Pods:
cd ios && pod install && cd ..

Web

  1. Add THEOplayer.chromeless.js and other required modules to your project.
  2. Initialize THEOplayer in your main JavaScript file:
import { THEOplayer, Options } from 'theoplayer';
const player = new THEOplayer(document.getElementById('my-video-element'), {
  source: 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6243.m3u8',
  license: 'THEOplayer license key'
});

The THEOplayer Component

The THEOplayer component provides the following properties and functionality:

  • source: URL of the video to play
  • license: THEOplayer license key
  • controls: Controls visibility (true/false)
  • disableSeeking: Disables seeking (true/false)
  • disableFullScreen: Disables fullscreen mode (true/false)
  • disablePiP: Disables Picture-in-Picture mode (true/false)
  • pip: Enter Picture-in-Picture mode (true/false)
  • autoplay: Starts playback automatically (true/false)
  • loop: Loops playback (true/false)
  • aspectRatio: Aspect ratio of the video
  • playbackRate: Playback speed multiplier
  • volume: Volume level (0-1)
  • hasClosedCaptions: Checks if closed captions are available (true/false)
  • closedCaptions: Enables/disables closed captions (true/false)
  • currentTrack: Gets the current track's index
  • availableTracks: Gets an array of available tracks
  • selectTrack: Selects a specific track

Features and Limitations

The table below highlights the features and limitations of the THEOplayer Flutter SDK across platforms:

Feature Android iOS Web
DRM Supported Supported Not supported
Closed captions Supported Supported Supported
Picture-in-Picture Supported Supported Supported
Live streaming Supported Supported Supported
Offline playback Not supported Not supported Not supported
Casting Not supported Not supported Not supported

Custom DRM Connectors

To use custom DRM connectors, you can follow the steps outlined in our Knowledge Base article: Using Custom DRM Connectors.

Contributing

We welcome contributions! Please refer to our Contribution Guide for guidelines.

Flutter News Hub