React-native-brightcove-ima-player NPM

react-native-brightcove-ima-player

React Native implementation of Brightcove Player native SDK video player.

Brightcove SDK Version used

Minimum Required version of iOS is 11
iOS Brightcove-Player-IMA 6.10.6
com.brightcove.player:android-ima-plugin 6.18.6

Installation

npm install react-native-brightcove-ima-player

iOS

Add source to Podfile and pod install && pod update
Specify platform version to 11.0

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

platform :ios, '11.0'

Android

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

allprojects {
  repositories {
      maven {
          url 'https://repo.brightcove.com/releases'
      }
  }
}

Usage

import { BrightcoveIMAPlayer } from "react-native-brightcove-ima-player";

// ...

<BrightcoveIMAPlayer
  accountId="3636334163001"
  videoId="3666678807001"
  policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
/>

Video player component of Brightcove.
It may not work on Android simulator.
For a more detailed example, please see example app.

Prop	Type	Description	Event Object
accountId	string	Brightcove AccountId. Required
policyKey	string	Brightcove PolicyKey. Required
videoId	string	Brightcove VideoId to playback.
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
adVideoLoadTimeout	number	Set the amount of milliseconds for video to load. Default is `3000`
playbackRate	number	Set playback speed scale. Default is `1`
disableDefaultControl	boolean	Disable default player control. Set `true` when you implement own video controller.
onAdsLoaded	Function	Indicates the IMA ads manager has loaded
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 { BrightcoveIMAPlayerPoster } from "react-native-brightcove-ima-player";

// ...

<BrightcoveIMAPlayerPoster
  style={styles.player}
  accountId="3636334163001"
  videoId="3666678807001"
  policyKey="BCpkADawqM1W-vUOMe6RSA3pA6Vw-VWUNn5rL0lzQabvrI63-VjS93gVUugDlmBpHIxP16X8TSe5LSKM415UHeMBmxl7pqcwVY_AZ4yKFwIpZPvXE34TpXEYYcmulxJQAOvHbv2dpfq-S_cm"
  resizeMode="contain"
/>

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`.