@sergeysova/react-kinescope-player v0.4.1

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;
};

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

Methods