Using npm:
npm install @kinescope/angular-kinescope-player --save
Using yarn:
yarn add @kinescope/angular-kinescope-player
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();
}
}
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 |
type Chapter = {
position: number;
title: string;
};
type Vtt = {
label: string;
src: string;
srcLang: string;
};
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;
};
};
type Bookmark = {
id: string;
time: number;
title?: string;
};
type Watermark =
| string
| {
text: string;
mode?: WatermarkModeTypes;
scale?: number;
displayTimeout?: number | {visible: number; hidden: number};
};
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 |
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> |