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