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

Chapter

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

LocalStorage

type LocalStorage = boolean | {
	quality?: 'item' | 'global' | boolean;
	time?: boolean;
	textTrack?: 'item' | 'global' | boolean;
};

vtt

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

CallToAction

type CallToAction = {
	id: string;
	title: string;
	description?: string;
	skipable?: boolean;
	buttonStyle?: object;
	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 };
};

Theme

type Theme = {
	subtitles?: {
		/** Base font size in em. */
		textSize: number;
		textAlign: 'left' | 'center';
		textLength: 'auto' | number;
	};
};

Events

Methods