React Native Brightcove Player

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

Supported Version

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

Installation

yarn add react-native-FanCode-player
react-native link react-native-FanCode-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

FanCodePlayer

import { FanCodePlayer } from 'react-native-FanCode-player';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <FanCodePlayer
          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 FanCodePlayer.

| 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 FanCodePlayer, 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