# react-native-brightcove-player
> A React Native implementation of Brightcove Player SDK.
Latest version **1.7.0** (published 2019-10-21) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-brightcove-player
pnpm add react-native-brightcove-player
yarn add react-native-brightcove-player
bun add react-native-brightcove-player
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.7.0 |
| Published | 2019-10-21 |
| First published | 2018-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 635.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 43 |
| Author | Ryota Mannari |
| Maintainers | manse |
| Keywords | react-native, ios, android, brightcove, react-component |
## Links
- npm: https://www.npmjs.com/package/react-native-brightcove-player
- Repository: https://github.com/manse/react-native-brightcove-player
- Issues: https://github.com/manse/react-native-brightcove-player/issues
- npm.io page: https://npm.io/package/react-native-brightcove-player
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 1.7.0 (latest) — 2019-10-21
- 1.6.7 — 2019-10-01
- 1.6.6 — 2019-09-08
- 1.6.5 — 2019-06-17
- 1.6.4 — 2019-06-11
- 1.6.3 — 2019-06-04
- 1.6.2 — 2019-05-29
- 1.6.1 — 2019-05-29
- 1.6.0 — 2019-05-28
- 1.5.2 — 2019-05-27
- 1.5.1 — 2019-05-24
- 1.5.0 — 2019-05-24
- 1.4.1 — 2019-05-20
- 1.4.0 — 2019-05-15
- 1.3.2 — 2018-11-20
- … 7 more at https://npm.io/package/react-native-brightcove-player/versions
## README
# 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
```console
yarn add react-native-brightcove-player
```
### iOS
- Add source to `Podfile` and `pod install && pod update`
- Specify platform version to `10.0`
- [Example](https://github.com/manse/react-native-brightcove-player/commit/d4d15dbff828c19fd110fe5764c2c72279e50d6a)
```rb
source 'https://github.com/brightcove/BrightcoveSpecs.git'
platform :ios, '10.0'
```
### Android
- Add maven source to repositories in `android/build.gradle`
- [Enables multiDex](https://developer.android.com/studio/build/multidex).
- [Example](https://github.com/manse/react-native-brightcove-player/commit/337450274a0c7ed3b8de890837e60949e6df1db0)
```gradle
allprojects {
repositories {
maven {
url 'http://repo.brightcove.com/releases'
}
}
}
```
## API
### BrightcovePlayer
```jsx
import { BrightcovePlayer } from 'react-native-brightcove-player';
export default class App extends Component {
render() {
return (
);
}
}
```
- Video player component of Brightcove.
- It may not work on Android simulator.
- For a more detailed example, please see [example](https://github.com/manse/react-native-brightcove-player/blob/master/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](#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
```jsx
import { BrightcovePlayerPoster } from 'react-native-brightcove-player';
export default class App extends Component {
render() {
return (
);
}
}
```
- 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
```ts
BrightcovePlayerUtil.requestDownloadVideoWithVideoId(accountId: string, policyKey: string, videoId: string, bitRate?: number): Promise
BrightcovePlayerUtil.requestDownloadVideoWithReferenceId(accountId: string, policyKey: string, referenceId: string, bitRate?: number): Promise
```
- 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
```ts
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
```ts
BrightcovePlayerUtil.deleteOfflineVideo(accountId: string, policyKey: string, videoToken: string): Promise
```
- Deletes offline videos or abort the ongoing download session.
#### addOfflineNotificationListener
```ts
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.
```ts
class Example extends Component {
componentDidMount() {
this.disposer = BrightcovePlayerUtil.addOfflineNotificationListener(console.log);
}
componentWillUnmount() {
this.disposer();
}
render() {
...
}
}
```
#### getPlaylistWithPlaylistId, getPlaylistWithReferenceId
```ts
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
---
_Source: https://npm.io/package/react-native-brightcove-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._