Socket
Socket
Sign inDemoInstall

@kinescope/react-kinescope-player

Package Overview
Dependencies
0
Maintainers
4
Versions
36
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kinescope/react-kinescope-player

React.js wrapper for Kinescope player


Version published
Maintainers
4
Install size
575 kB
Created

Changelog

Source

0.4.5 (2024-01-24)

Features

  • isPip setPip (c5c8373)

Readme

Source

License

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

PropTypeDefaultRequired
videoIdstring | string[]NoYes
classNamestringNoNo
styleanyNoNo
preloadboolean | 'auto'falseNo
titlestringNoNo
subtitlestringNoNo
posterstringNoNo
chaptersChapter[]NoNo
vttVtt[]NoNo
widthnumber | string100%No
heightnumber | string100%No
autoPlayboolean | 'viewable'falseNo
autoPauseboolean | 'reset'trueNo
loopbooleanfalseNo
playsInlinebooleantrueNo
mutedbooleanfalseNo
language'en' | 'ru'autoNo
controlsbooleantrueNo
mainPlayButtonbooleantrueNo
playbackRateButtonbooleanfalseNo
externalIdstringNoNo
drmAuthTokenstringNoNo
actionsAction[]NoNo
bookmarksBookmark[]NoNo
watermarkWatermarkNoNo
localStoragebooleantrueNo
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

EventData
onJSLoadNo
onJSLoadErrorNo
onReady currentTime: number;
duration: number;
quality: VideoQuality;
qualityLevels: VideoQualityLevels;
onQualityChanged quality: VideoQuality;
onCurrentTrackChanged item: {id?: string};
onSeekChapter position: number;
onSizeChanged width: number;
height: number;
onPlayNo
onPlayingNo
onWaitingNo
onPauseNo
onEndedNo
onTimeUpdatecurrentTime: number;
onProgressbufferedTime: number;
onDurationChangeduration: number;
onVolumeChange muted: boolean;
volume: number;
onPlaybackRateChangeplaybackRate: number;
onSeekedNo
onFullscreenChange isFullscreen: boolean;
video: boolean;
onPipChange isPip: boolean;
onCallAction id: string; title?: string; type: string;
onCallBookmark id: string;
time: number;
title?: string;
onErrorerror: unknown;
onDestroyNo

Methods

MethodParamsResult
isPausedNoPromise<boolean>
isEndedNoPromise<boolean>
playNoPromise<void>
pauseNoPromise<boolean>
stopNoPromise<void>
getCurrentTimeNoPromise<number>
getDurationNoPromise<number>
seekTo(time: number)Promise<void>
isMutedNoPromise<boolean>
muteNoPromise<void>
unmuteNoPromise<void>
getVolumeNoPromise<number>
setVolume(value: number)Promise<void>
getPlaybackRateNoPromise<number>
setPlaybackRate(value: number)Promise<void>
getVideoQualityListNoPromise<VideoQuality[]>
getVideoQualityNoPromise<VideoQuality>
setVideoQuality(quality: VideoQuality)Promise<void>
enableTextTrack(lang: string)Promise<void>
disableTextTrackNoPromise<void>
closeCTANoPromise<void>
isFullscreenNoPromise<boolean>
setFullscreen(fullscreen: boolean)Promise<void>
isPipNoPromise<boolean>
setPip(pip: boolean)Promise<void>
getPlaylistItemNoPromise<{id: string | undefined} | undefined>
switchTo(id: string)Promise<void>
nextNoPromise<void>
previousNoPromise<void>

Keywords

FAQs

Last updated on 24 Jan 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc