Using npm:
npm install @kinescope/react-kinescope-player --saveUsing yarn:
yarn add @kinescope/react-kinescope-playerimport React from 'react'
import KinescopePlayer from '@kinescope/react-kinescope-player';
function Player() {
return (
<KinescopePlayer videoId="00000000" />
)
}
export default Player;functions onTimeUpdate({currentTime}){
...
}
<KinescopePlayer videoId="00000000" onTimeUpdate={onTimeUpdate} />let playerRef = React.createRef();
<KinescopePlayer ref={playerRef} videoId="00000000" />
functions handleMuteClick(){
playerRef.current.mute();
}
<button onClick={handleMuteClick}>Mute</button>import dynamic from 'next/dynamic'
const KinescopePlayer = dynamic(import('@kinescope/react-kinescope-player'), { ssr: false });
function Player() {
return (
<KinescopePlayer videoId="00000000" />
)
}
export default Player;| Prop | Type | Default | Required |
|---|---|---|---|
| videoId | string | string[] | No | Yes |
| className | string | No | No |
| style | any | No | No |
| title | string | No | No |
| subtitle | string | No | No |
| poster | string | No | No |
| chapters | Chapter[] | No | No |
| vtt | Vtt[] | No | No |
| width | number | string | 100% | No |
| height | number | string | 100% | No |
| autoPlay | boolean | 'viewable' | false | No |
| autoPause | boolean | 'reset' | true | No |
| loop | boolean | false | No |
| playsInline | boolean | true | No |
| muted | boolean | false | No |
| language | 'en' | 'ru' | auto | No |
| controls | boolean | true | No |
| mainPlayButton | boolean | true | No |
| playbackRateButton | boolean | false | No |
| externalId | string | No | No |
| drmAuthToken | string | No | No |
| actions | Action[] | No | No |
| bookmarks | Bookmark[] | No | No |
| watermark | Watermark | No | No |
| localStorage | boolean | true | No |
type Chapter = {
position: number;
title: string;
};type Vtt = {
label: string;
src: string;
srcLang: string;
};type Action = (ActionToolBar | ActionCallToAction);
type ActionToolBar = {
id: string;
type: 'tool';
title?: string;
icon: 'note';
};
type ActionCallToAction = {
id: string;
type: 'cta';
title: string;
description?: string;
skipable?: boolean;
buttonStyle?: CSSProperties;
trigger: {
percentages: number[];
timePoints: number[];
pause: boolean;
};
};type Bookmark = {
id: string;
time: number;
title?: string;
};type Watermark =
| string
| {
text: string;
mode?: WatermarkModeTypes;
scale?: number;
displayTimeout?: number | {visible: number; hidden: number};
};| Event | Data |
|---|---|
| onJSLoad | No |
| onJSLoadError | No |
| onReady |
currentTime: number; duration: number; quality: VideoQuality; qualityLevels: VideoQualityLevels; |
| onQualityChanged | quality: VideoQuality; |
| onCurrentTrackChanged | item: {id?: string}; |
| onSeekChapter | position: number; |
| onSizeChanged |
width: number; height: number; |
| onPlay | No |
| onPlaying | No |
| onWaiting | No |
| onPause | No |
| onEnded | No |
| onTimeUpdate | currentTime: number; |
| onProgress | bufferedTime: number; |
| onDurationChange | duration: number; |
| onVolumeChange |
muted: boolean; volume: number; |
| onPlaybackRateChange | playbackRate: number; |
| onSeeked | No |
| onFullscreenChange |
isFullscreen: boolean; video: boolean; |
| onCallAction | id: string; title?: string; type: string; |
| onCallBookmark |
id: string; time: number; title?: string; |
| onError | error: unknown; |
| onDestroy | No |
| Method | Params | Result |
|---|---|---|
| isPaused | No | Promise<boolean> |
| isEnded | No | Promise<boolean> |
| play | No | Promise<void> |
| pause | No | Promise<boolean> |
| stop | No | Promise<void> |
| getCurrentTime | No | Promise<number> |
| getDuration | No | Promise<number> |
| seekTo | (time: number) | Promise<void> |
| isMuted | No | Promise<boolean> |
| mute | No | Promise<void> |
| unmute | No | Promise<void> |
| getVolume | No | Promise<number> |
| setVolume | (value: number) | Promise<void> |
| getPlaybackRate | No | Promise<number> |
| setPlaybackRate | (value: number) | Promise<void> |
| getVideoQualityList | No | Promise<VideoQuality[]> |
| getVideoQuality | No | Promise<VideoQuality> |
| setVideoQuality | (quality: VideoQuality) | Promise<void> |
| enableTextTrack | (lang: string) | Promise<void> |
| disableTextTrack | No | Promise<void> |
| closeCTA | No | Promise<void> |
| isFullscreen | No | Promise<boolean> |
| setFullscreen | (fullscreen: boolean) | Promise<void> |
| getPlaylistItem | No | Promise<{id: string | undefined} | undefined> |
| switchTo | (id: string) | Promise<void> |
| next | No | Promise<void> |
| previous | No | Promise<void> |