React Native Brightcove Player

• A React Native implementation of Brightcove Player SDK.
• Supported Features
  • Brightcove player component
  • Poster image component
  • Retrieving playlist
  • Managing offline playback with Dynamic Delivery

Supported Version

• iOS 10 >=
• Android 5.0 >=
• Brightcove SDK 6.x

Installation

yarn add react-native-brightcove-player
react-native link react-native-brightcove-player

• Add resolver entry into metro.config.js or rn-cli.config.js if it does not work.
  • Note that it is workaround, so you should remove when it's no longer needed

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/node_modules\/.*\/node_modules\/react-native\/.*/])
  }
};

iOS

• Make Podfile and pod install && pod update

source 'https://github.com/brightcove/BrightcoveSpecs.git'

platform :ios, '10.0'
use_frameworks!

target 'YOUR_PROJECT_ID' do
    pod 'Brightcove-Player-Core'
end

Android

• Add maven source to repositories in android/build.gradle
• Enables multiDex.

allprojects {
  repositories {
      maven {
          url 'http://repo.brightcove.com/releases'
      }
  }
}

API

BrightcovePlayer

import { BrightcovePlayer } from 'react-native-brightcove-player';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BrightcovePlayer
          style={styles.player}
          accountId="3636334163001"
          videoId="3666678807001"
          policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
        />
      </View>
    );
  }
}

• Video player component of Brightcove.
• It may not work on Android simulator.
• For a more detailed example, please see example.

Prop	Type	Description	Event Object
accountId	string	Brightcove AccountId. Required
policyKey	string	Brightcove PolicyKey. Required
videoId	string	Brightcove VideoId to playback.
referenceId	string	Brightcove ReferenceId to playback.
playerId	string	A player id to identify the player in the analytics.
playerType	string	set the type of the player
videoToken	string	Offline video token that generated by BrightcovePlayerUtil. Video download session must be completed before setting prop and playback. If set videoToken, videoId and referenceId will be ignored.
autoPlay	boolean	Set true to play automatically
play	boolean	Control playback and pause
fullscreen	boolean	Control full screen state
fullscreenStyle	string	Set styles for the player when enter on fullscreen mode
volume	number	Set audio volume (0.0 ~ 1.0)
bitRate	number	Set maximum buffering bitrate. Set 0 to automatic quality
playbackRate	number	Set playback speed scale. Default is 1
disableDefaultControl	boolean	Disable default player control. Set true when you implement own video controller.
onReady	Function	Indicates the video can be played back
onPlay	Function	Indicates the video playback starts
onPause	Function	Indicates the video is paused
onEnd	Function	Indicates the video is played to the end
onProgress	Function	Indicates the playback head of the video advances.	{ currentTime: number }
onChangeDuration	Function	Indicates the video length is changed	{ duration: number }
onUpdateBufferProgress	Function	Indicates the video loading buffer is updated	{ bufferProgress: number }
onBufferingStarted	Function	Indicates the video started buffering
onBufferingCompleted	Function	Indicates the video completed buffering
onBeforeEnterFullscreen	Function	Indicates the player before enters full screen

| onEnterFullscreen | Function | Indicates the player enters full screen | | | onBeforeExitFullscreen | Function | Indicates the player beforeexit full screen | | | onExitFullscreen | Function | Indicates the player exit full screen | | | onError | Function | Fires an error event if anything happens that avoid the video to play | | | onNetworkConnectivityChange | Function | Indicates if the player has lost connection or trying to reconect or if it recover from it | |

Method	Description
seekTo(timeInSeconds: number) => void	Change playhead to arbitrary time
setFullscreen(fullscren: boolean) => void	Programaticaly Enter/Exit from fullscreen

BrightcovePlayerPoster

import { BrightcovePlayerPoster } from 'react-native-brightcove-player';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <BrightcovePlayerPoster
          style={styles.player}
          accountId="3636334163001"
          videoId="3666678807001"
          policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
          resizeMode="contain"
        />
      </View>
    );
  }
}

• Displays a poster specified by videoId, referenceId or videoToken.
• Prop is about the same as BrightcovePlayer.

Prop	Type	Description
accountId	string	Required
policyKey	string	Required
videoId	string
referenceId	string
videoToken	string
resizeMode	string	Set the image resize method. Specifying cover or contain works the same as CSS keywords of background-size. Specifying fit, scales to fit the component size without considering aspect ratio of the image. Default value is cover.

BrightcovePlayerUtil

• Promise for all methods may be invoke reject. Be sure to catch the exception.

requestDownloadVideoWithVideoId, requestDownloadVideoWithReferenceId

BrightcovePlayerUtil.requestDownloadVideoWithVideoId(accountId: string, policyKey: string, videoId: string, bitRate?: number): Promise<string>
BrightcovePlayerUtil.requestDownloadVideoWithReferenceId(accountId: string, policyKey: string, referenceId: string, bitRate?: number): Promise<string>

• Starts downloading the specified video with videoId or referenceId for offline playback.
• Returns VideoToken in string wrapped with Promise. This value will be used for offline playback with BrightcovePlayer, acquisition for download status or deletion of offline videos.
  • Note that this promise resolves the download start, not the download complete.
  • In case that specified video has already been downloaded Promise will be rejected.
  • If the download is in progress, the download is retried on iOS and rejected on Android.
• Does not work properly on simulator.
• bitrate controls the quality of the downloading video in bps.
  • Downloads a rendition with the largest bitrate less than or equal to this value.
  • If no rendition can be found with a bitrate that is smaller than or equal to this bitrate, the lowest rendition will be downloaded.
  • If this value is 0 or not specified, the lowest rendition with video will be downloaded.

getOfflineVideoStatuses

BrightcovePlayerUtil.getOfflineVideoStatuses(accountId: string, policyKey: string): Promise<{
  accountId: string;
  videoId: string;
  videoToken: string;
  downloadProgress: number;
}[]>

• Lists downloaded offline videos and downloading progresses.
• downloadProgress equals 1 indicates that offline playback available.
  • Otherwise the download is in progress and the value shows the progress ratio in 0.0 ~ 1.0.
• Note that iOS returns offline videos for all accounts but Android only returns for the specified account. In other words iOS does not consider accountId and policyKey.

deleteOfflineVideo

BrightcovePlayerUtil.deleteOfflineVideo(accountId: string, policyKey: string, videoToken: string): Promise<void>

• Deletes offline videos or abort the ongoing download session.

addOfflineNotificationListener

BrightcovePlayerUtil.addOfflineNotificationListener(callback: (statuses: {
  accountId: string;
  videoId: string;
  videoToken: string;
  downloadProgress: number;
}[]) => void): Function

• Register a callback to notify storage changes such as video download progress or deletion of offline video.
• Make sure call disposer function when callback is no longer needed.

class Example extends Component {
  componentDidMount() {
    this.disposer = BrightcovePlayerUtil.addOfflineNotificationListener(console.log);
  }

  componentWillUnmount() {
    this.disposer();
  }

  render() {
    ...
  }
}

getPlaylistWithPlaylistId, getPlaylistWithReferenceId

BrightcovePlayerUtil.getPlaylistWithPlaylistId(accountId: string, policyKey: string, playlistId: string): Promise<{
  accountId: String;
  videoId: String;
  referenceId: String;
  name: String;
  description: String;
  duration: number;
}[]>;
BrightcovePlayerUtil.getPlaylistWithReferenceId(accountId: string, policyKey: string, referenceId: string): Promise<{
  accountId: String;
  videoId: String;
  referenceId: String;
  name: String;
  description: String;
  duration: number;
}[]>;

• Retrieves a playlist specified by playlistId or referenceId.

License

MIT