Skip to content

kinescope/angular-kinescope-player

Repository files navigation

License

Angular Kinescope Player

Installation

Using npm:

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

Using yarn:

yarn add @kinescope/angular-kinescope-player

Getting Started

Basic usage

import { KinescopePlayerComponent } from '@kinescope/angular-kinescope-player';

@NgModule({
  ...
  imports: [
    ...
    KinescopePlayerComponent,
  ],
})
import { KinescopePlayerConfig, KinescopePlayerComponent } from 'angular-kinescope-player';

@Component({
  ...
  template: '<kinescope-player #kinescope [config]="config"></kinescope-player>'
})
export class AComponent implements AfterViewInit {

  config: KinescopePlayerConfig = {
    videoId: '00000000',
  };
  
  @ViewChild('kinescope') private kinescope: KinescopePlayerComponent;

  ngAfterViewInit() {
    this.kinescope,play();
  }
}

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
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;
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: number;
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>