@kinescope/react-kinescope-player
Version:
React.js wrapper for Kinescope player
650 lines (618 loc) • 11.2 kB
Markdown
[](https://kinescope.io/)
<h1 align="center">React Kinescope Player</h1>
## Installation
Using npm:
```sh
npm install @kinescope/react-kinescope-player --save
```
Using yarn:
```sh
yarn add @kinescope/react-kinescope-player
```
## Getting Started
### Basic usage
```jsx
import React from 'react'
import KinescopePlayer from '@kinescope/react-kinescope-player';
function Player() {
return (
<KinescopePlayer videoId="00000000" />
)
}
export default Player;
```
### Events
```jsx
functions onTimeUpdate({currentTime}){
...
}
<KinescopePlayer videoId="00000000" onTimeUpdate={onTimeUpdate} />
```
### Methods
```jsx
let playerRef = React.createRef();
<KinescopePlayer ref={playerRef} videoId="00000000" />
functions handleMuteClick(){
playerRef.current.mute();
}
<button onClick={handleMuteClick}>Mute</button>
```
### Next.js
```jsx
import dynamic from 'next/dynamic'
const KinescopePlayer = dynamic(import('@kinescope/react-kinescope-player'), { ssr: false });
function Player() {
return (
<KinescopePlayer videoId="00000000" />
)
}
export default Player;
```
## Props
<table>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Required</th>
</tr>
<tr>
<td>videoId</td>
<td>string | string[]</td>
<td>No</td>
<td>Yes</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>query</td>
<td><a href="#query">Query</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>style</td>
<td>any</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>preload</td>
<td>boolean | 'none' | 'metadata' | 'auto'</td>
<td>false</td>
<td>No</td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>subtitle</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>poster</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>chapters</td>
<td><a href="#chapter">Chapter</a>[]</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>vtt</td>
<td><a href="#vtt">Vtt</a>[]</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>width</td>
<td>number | string</td>
<td>100%</td>
<td>No</td>
</tr>
<tr>
<td>height</td>
<td>number | string</td>
<td>100%</td>
<td>No</td>
</tr>
<tr>
<td>autoPlay</td>
<td>boolean | 'viewable'</td>
<td>false</td>
<td>No</td>
</tr>
<tr>
<td>autoPause</td>
<td>boolean | 'reset'</td>
<td>true</td>
<td>No</td>
</tr>
<tr>
<td>loop</td>
<td>boolean</td>
<td>false</td>
<td>No</td>
</tr>
<tr>
<td>playsInline</td>
<td>boolean</td>
<td>true</td>
<td>No</td>
</tr>
<tr>
<td>muted</td>
<td>boolean</td>
<td>false</td>
<td>No</td>
</tr>
<tr>
<td>language</td>
<td>'en' | 'ru'</td>
<td>auto</td>
<td>No</td>
</tr>
<tr>
<td>controls</td>
<td>boolean</td>
<td>true</td>
<td>No</td>
</tr>
<tr>
<td>mainPlayButton</td>
<td>boolean</td>
<td>true</td>
<td>No</td>
</tr>
<tr>
<td>playbackRateButton</td>
<td>boolean</td>
<td>false</td>
<td>No</td>
</tr>
<tr>
<td>textTrack</td>
<td>boolean | string</td>
<td>true</td>
<td>No</td>
</tr>
<tr>
<td>externalId</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>drmAuthToken</td>
<td>string</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>callToAction</td>
<td><a href="#callToAction">CallToAction</a>[]</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>bookmarks</td>
<td><a href="#bookmark">Bookmark</a>[]</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>watermark</td>
<td><a href="#watermark">Watermark</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>playlistOptions</td>
<td><a href="#PlaylistOptions">PlaylistOptions</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>theme</td>
<td><a href="#theme">Theme</a></td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<td>localStorage</td>
<td><a href="#localStorage">LocalStorage</a></td>
<td>true</td>
<td>No</td>
</tr>
</table>
##### Chapter
```ts
type Chapter = {
position: number;
title: string;
};
```
##### Query
```ts
type QueryTypes = {
seek?: number;
duration?: number;
playerId?: string;
};
```
##### LocalStorage
```ts
type LocalStorage = boolean | {
quality?: 'item' | 'global' | boolean;
time?: boolean;
textTrack?: 'item' | 'global' | boolean;
};
```
##### vtt
```ts
type Vtt = {
label: string;
src: string;
srcLang: string;
};
```
##### CallToAction
```ts
type CallToAction = {
id: string;
title: string;
description?: string;
skipable?: boolean;
buttonStyle?: object;
trigger: {
percentages: number[];
timePoints: number[];
pause: boolean;
};
};
```
##### Bookmark
```ts
type Bookmark = {
id: string;
time: number;
title?: string;
};
```
##### Watermark
```ts
type Watermark =
| string
| {
text: string;
mode?: WatermarkModeTypes;
scale?: number;
displayTimeout?: number | { visible: number; hidden: number };
};
```
##### PlaylistOptions
```ts
type PlaylistOptions = {
autoSwitch?: boolean;
initialItem?: string;
loop?: boolean;
};
```
##### Theme
```ts
type Theme = {
subtitles?: {
/** Base font size in em. */
textSсale: number;
textAlign: 'left' | 'center';
textLength: 'auto' | number;
};
};
```
## Events
<table>
<tr>
<th>Event</th>
<th>Data</th>
</tr>
<tr>
<td>onJSLoad</td>
<td>No</td>
</tr>
<tr>
<td>onJSLoadError</td>
<td>No</td>
</tr>
<tr>
<td>onInit</td>
<td>
playerId: string;
</td>
</tr>
<tr>
<td>onInitError</td>
<td>Error</td>
</tr>
<tr>
<td>onReady</td>
<td>
currentTime: number;<br/>
duration: number;<br/>
quality: VideoQuality;
</td>
</tr>
<tr>
<td>onQualityChanged</td>
<td>
quality: VideoQuality;
</td>
</tr>
<tr>
<td>onCurrentTrackChanged</td>
<td>
item: {id?: string};
</td>
</tr>
<tr>
<td>onSeekChapter</td>
<td>
position: number;
</td>
</tr>
<tr>
<td>onSizeChanged</td>
<td>
width: number;<br/>
height: number;
</td>
</tr>
<tr>
<td>onPlay</td>
<td>No</td>
</tr>
<tr>
<td>onPlaying</td>
<td>No</td>
</tr>
<tr>
<td>onWaiting</td>
<td>No</td>
</tr>
<tr>
<td>onPause</td>
<td>No</td>
</tr>
<tr>
<td>onEnded</td>
<td>No</td>
</tr>
<tr>
<td>onTimeUpdate</td>
<td>currentTime: number;</td>
</tr>
<tr>
<td>onProgress</td>
<td>bufferedTime: number;</td>
</tr>
<tr>
<td>onDurationChange</td>
<td>duration: number;</td>
</tr>
<tr>
<td>onVolumeChange</td>
<td>
muted: boolean;<br/>
volume: number;
</td>
</tr>
<tr>
<td>onPlaybackRateChange</td>
<td>playbackRate: number;</td>
</tr>
<tr>
<td>onSeeked</td>
<td>No</td>
</tr>
<tr>
<td>onFullscreenChange</td>
<td>
isFullscreen: boolean;<br/>
video: boolean;
</td>
</tr>
<tr>
<td>onPipChange</td>
<td>
isPip: boolean;
</td>
</tr>
<tr>
<td>onCallAction</td>
<td>
id: string;
title?: string;
type: string;
</td>
</tr>
<tr>
<td>onCallBookmark</td>
<td>
id: string;<br/>
time: number;<br/>
title?: string;
</td>
</tr>
<tr>
<td>onError</td>
<td>error: unknown;</td>
</tr>
<tr>
<td>onDestroy</td>
<td>No</td>
</tr>
</table>
## Methods
<table>
<tr>
<th>Method</th>
<th>Params</th>
<th>Result</th>
</tr>
<tr>
<td>isPaused</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>isEnded</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>play</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>pause</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>stop</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getCurrentTime</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>getDuration</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>seekTo</td>
<td>(time: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>isMuted</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>mute</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>unmute</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getVolume</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>setVolume</td>
<td>(value: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getPlaybackRate</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>setPlaybackRate</td>
<td>(value: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getVideoQualityList</td>
<td>No</td>
<td>Promise<VideoQuality[]></td>
</tr>
<tr>
<td>getVideoQuality</td>
<td>No</td>
<td>Promise<VideoQuality></td>
</tr>
<tr>
<td>setVideoQuality</td>
<td>(quality: VideoQuality)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>enableTextTrack</td>
<td>(lang: string)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>disableTextTrack</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>closeCTA</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>isFullscreen</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>setFullscreen</td>
<td>(fullscreen: boolean)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>isPip</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>setPip</td>
<td>(pip: boolean)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getPlaylistItem</td>
<td>No</td>
<td>Promise<{id: string | undefined} | undefined></td>
</tr>
<tr>
<td>switchTo</td>
<td>(id: string)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>next</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>previous</td>
<td>No</td>
<td>Promise<void></td>
</tr>
</table>