Angular

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

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

@NgModule({
  imports: [KinescopePlayerComponent],
})
export class AppModule {}

import { AfterViewInit, Component, ViewChild } from '@angular/core'
import {
  KinescopePlayerComponent,
  KinescopePlayerConfig,
} from '@kinescope/angular-kinescope-player'

@Component({
  template: `<kinescope-player #kinescope [config]="config"></kinescope-player>`,
})
export class PlayerComponent implements AfterViewInit {
  config: KinescopePlayerConfig = {
    videoId: 'VIDEO_ID',
  }

  @ViewChild('kinescope') private kinescope!: KinescopePlayerComponent

  ngAfterViewInit() {
    // Methods are available after the player is initialized.
    // void this.kinescope.play()
  }
}

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?: 'random' | 'stripes'
      scale?: number
      displayTimeout?: number | { visible: number; hidden: number }
    }