moiseyev/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>

Props

Prop	Type	Default	Required
videoId	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
externalId	string	No	No
actions	Action[]	No	No
bookmarks	Bookmark[]	No	No
watermarkText	string	No	No
watermarkMode	'stripes' | 'random'	stripes	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;
};

Events

Event	Data
onJSLoad	No
onJSLoadError	No
onReady	currentTime: number; duration: number; quality: VideoQuality; qualityLevels: VideoQualityLevels;
onQualityChanged	quality: VideoQuality;
onAutoQualityChanged	quality: VideoQuality;
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: boolean;
onSeeking	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[]>
getCurrentVideoQuality	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>