sergeysova/react-kinescope-player

React component for the Kinescope player

React Kinescope Player

Installation

Using npm:

npm install @kinescope/react-kinescope-player --save

Using yarn:

yarn add @kinescope/react-kinescope-player

Getting Started

Basic usage

import React from 'react'
import KinescopePlayer from '@kinescope/react-kinescope-player';

function Player() {
  return (
    <KinescopePlayer videoId="00000000" />
  )
}

export default Player;

Events

functions onTimeUpdate({currentTime}){
    ...
}

<KinescopePlayer videoId="00000000" onTimeUpdate={onTimeUpdate} />

Methods

let playerRef = React.createRef();

<KinescopePlayer ref={playerRef} videoId="00000000" />

functions handleMuteClick(){
    playerRef.current.mute();
}

<button onClick={handleMuteClick}>Mute</button>

Next.js

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

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

type Chapter = {
	position: number;
	title: string;
};

vtt

type Vtt = {
	label: string;
	src: string;
	srcLang: string;
};

Action

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

type Bookmark = {
	id: string;
	time: number;
	title?: string;
};

Watermark

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>