[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://kinescope.io/)

React Kinescope Player

## 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 ( ) } export default Player; ``` ### Events ```jsx functions onTimeUpdate({currentTime}){ ... } ``` ### Methods ```jsx let playerRef = React.createRef(); functions handleMuteClick(){ playerRef.current.mute(); } ``` ### Next.js ```jsx import dynamic from 'next/dynamic' const KinescopePlayer = dynamic(import('@kinescope/react-kinescope-player'), { ssr: false }); function Player() { return ( ) } export default Player; ``` ## Props
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
##### Chapter ```ts type Chapter = { position: number; title: string; }; ``` ##### vtt ```ts type Vtt = { label: string; src: string; srcLang: string; }; ``` ##### Action ```ts 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; }; }; ``` ##### 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}; }; ``` ## Events
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
## Methods
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>