React Native Brightcove Player

Supported Version

Installation

yarn add react-native-brightcove-player

iOS

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

platform :ios, '10.0'

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>
    );
  }
}
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>
    );
  }
}
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

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>

getOfflineVideoStatuses

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

deleteOfflineVideo

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

addOfflineNotificationListener

BrightcovePlayerUtil.addOfflineNotificationListener(callback: (statuses: {
  accountId: string;
  videoId: string;
  videoToken: string;
  downloadProgress: number;
}[]) => void): Function
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;
}[]>;

License

MIT