react-native-theoplayer

React Native THEOplayer

License

This projects falls under the license as defined in https://github.com/THEOplayer/license-and-disclaimer.

Table of Contents

1. Overview
2. Prerequisites
3. How to use these guides
4. Features
5. Available connectors
6. Getting Started

Overview

The react-native-theoplayer package provides a THEOplayerView component supporting video playback on the following platforms:

• Android, Android TV & FireTV
• iOS & tvOS (Apple TV)
• HTML5, Tizen & webOS (web, mobile web, smart TVs, set-top boxes and gaming consoles).

This document covers the creation of a minimal app including a THEOplayerView component, and an overview of the accompanying example app with a user interface provided by the @theoplayer/react-native-ui package.

It also gives a description of the properties of the THEOplayerView component, and a list of features and known limitations.

Prerequisites

For each platform, a dependency to the corresponding THEOplayer SDK is included through a dependency manager:

• Gradle & Maven for Android
• Cocoapods for iOS
• npm for Web

In order to use one of these THEOplayer SDKs, it is necessary to obtain a valid THEOplayer license for that specific platform, i.e. HTML5, Android, and/or iOS. You can sign up for a THEOplayer SDK license through our portal.

If you have no previous experience in React Native, we encourage you to first explore the React Native Documentation, as it gives you a good start on one of the most popular app development frameworks.

How to use these guides

These are guides on how to use the THEOplayer React Native SDK in your React Native project(s) and can be used linearly or by searching the specific section. It is recommended that you have a basic understanding of how React Native works to speed up the way of working with THEOplayer React Native SDK.

Features

Depending on the platform on which the application is deployed, a different set of features is available.

If a feature missing, additional help is needed, or you need to extend the package, please reach out to us for support.

Feature	Android, Android TV, Fire TV	Web	iOS, tvOS
Streaming	MPEG-DASH (fmp4, CMAF), HLS (TS, CMAF), Progressive MP4, MP3	HLS (TS, CMAF), Progressive MP4, MP3
Content Protection	Widevine	Widevine, PlayReady, Fairplay	Fairplay
DRM Connectors	BuyDRM, EZDRM, Anvato, Titanium, Axinom, Irdeto, VuDRM, Comcast, Verimatrix, Azure, …
Analytics Connectors	Adobe, Agama, Comscore, Conviva, Mux, Nielsen, Youbora
Subtitles & Closed Captions	CEA-608/708, SRT, TTML, WebVTT
Metadata	Event stream, emsg, ID3, EXT-X-DATERANGE, EXT-X-PROGRAM-DATE-TIME
Advertising Integration	Google IMA, Google DAI
Cast Integration	Chromecast	Chromecast, Airplay
Presentation Mode	Inline, Picture-in-Picture, Fullscreen
Audio Control Management	Audio focus & Audio-Becoming-Noisy mgmt	(Audio control management by platform)
Advanced APIs	Background playback, Media Session, Media Cache (offline playback)	Background playback, NowPlaying, Media Cache (iOS only)
User Interface @theoplayer/react-native-ui	Basic playback, media & text track selection, progress bar, live & vod, preview thumbnails, customisable & extensible

Available connectors

The react-native-theoplayer package can be combined with any number of connectors to provide extra functionality. Currently, the following connectors are available:

Connector	npm package	Source
Adobe Heartbeat analytics using the Media Collections API		Adobe
Adobe Media Edge analytics		Adobe Edge
Agama analytics		Agama
Comscore analytics		Comscore
Conviva analytics		Conviva
Mux analytics		Mux
Nielsen analytics		Nielsen
Youbora analytics		Youbora
Content protection (DRM)		DRM
React Native Open UI		Open UI
A template for react-native-theoplayer connectors.		Connector template

Creating your first app

This section starts with creating a minimal demo app that integrates the react-native-theoplayer package, followed by an overview of the available properties and functionality of the THEOplayerView component. An example application including a basic user interface and demo sources is included in the git repository, and discussed in the next section.

• Creating a minimal demo app
  • Getting started on Android
  • Getting started on iOS
  • Getting started on Web
• The THEOplayerView component
• The example application

Knowledge Base

This section gives an overview of features, limitations and known issues:

• Adaptive Bitrate (ABR)
• Advertisements
• Audio Control Management
• Background playback and notifications
• Casting with Chromecast and Airplay
• Digital Rights Management (DRM)
• Fullscreen presentation
• Media Caching
• Picture-in-Picture (PiP)
• Subtitles, Closed Captions and Metadata tracks
• Limitations and known issues

API Reference

See the API Reference for detailed documentation about all available components and functions.

Changelog

[7.8.0] - 24-08-09

Added

• Added shouldResumeAfterInterruptions to the BackgroundAudioConfiguration which toggles playback resume after an interruption (e.g. phone call) on the lockscreen.
• Added the option to set a nil source on the iOS Bridge, to 'unset' the previous source.
• Added the fast-forward & rewind buttons for the Android notification when mediaControl.mediaSessionEnabled is set to true.
• Added a mediaControl.convertSkipToSeek player config property to allow seeking with the NEXT and PREVIOUS media buttons. Its default value is false.

Fixed

• Fixed an issue where the Lockscreen showed enabled controls when the player has no valid source.
• Fixed an issue on Android where the notification would not disappear when setting an undefined source.

Changed

• Replaced the MediaBrowserService with a regular Service to facilitate background playback on Android.