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

iOS

• Add source to Podfile and pod install && pod update
• Specify platform version to 10.0
• Example

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

platform :ios, '10.0'

Android

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

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.
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
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 }
onEnterFullscreen	Function	Indicates the player enters full screen
onExitFullscreen	Function	Indicates the player exit full screen

Method	Description
seekTo(timeInSeconds: number) => void	Change playhead to arbitrary time

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