/react-native-brightcove-player

A React Native implementation of Brightcove Player SDK.

Primary LanguageObjective-CMIT 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

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

allprojects {
  repositories {
      maven {
          url 'https://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