/react-native-brightcove-player

A React Native implementation of Brightcove Player SDK.

Primary LanguageJavaScriptMIT LicenseMIT

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

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