/vue-kinescope-player

Vue bridge for the Kinescope player

Primary LanguageVueApache License 2.0Apache-2.0

Vue wrapper for Kinescope Embed Player

Installation

Using npm:

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

Using yarn:

yarn add @kinescope/vue-kinescope-player

Getting Started

You can either import it in your whole project

import KinescopePlayer from '@kinescope/vue-kinescope-player'
import Vue from 'vue'

Vue.use(KinescopePlayer)

or import it locally in a component

import { KinescopePlayer } from '@kinescope/vue-kinescope-player'

export default {
  data: {},
  components: { KinescopePlayer }
}
<!-- events -->
<template>
  <kinescope-player
    :video-id="200702846"
    @ready="handleReady"
    @play="handlePlay"
  ></kinescope-player>
</template>
<!-- methods -->
<template>
  <div>
    <kinescope-player
      ref="kinescope"
      :video-id='200702846'
      @ready="handleReady"
    ></kinescope-player>
    <button @click="handleClick" :disabled="!ready">Play</button>
  </div>
</template>

<script>
import {KinescopePlayer} from '@kinescope/vue-kinescope-player';

export default {
  data() {
    return {
      ready: false,
    };
  },
  methods: {
    handleReady() {
      this.ready = true;
    },
    handleClick() {
      this.$refs.kinescope.player.play();
    }
  },
  components: { KinescopePlayer },
}
</script>

Props

Prop Type Default Description Required
video-id Number, String - Video id from app.kinescope.io Yes
width Number, String 100% Player width No
height Number, String 100% Player height No
auto-play Boolean false The video automatically begins to playback as soon as it can do No
muted Boolean false The video starts muted No
loop Boolean false Loop the video No

Events

Event Data
js-load No
js-load-error No
ready currentTime: number
duration: number
quality: string | number
qualityLevels: {}
quality-changed quality: string | number
auto-quality-changed quality: string | number
seek-chapter position: number
size-changed width: number
height: number
play No
playing No
waiting No
pause No
ended No
time-update currentTime: number
progress bufferedTime: number
duration-change duration: number
volume-change muted: boolean
volume: number
playback-rate-change playbackRate: boolean
seeking No
fullscreen-change isFullscreen: boolean
video: boolean
call-action id: string
title?: string
type: string
call-bookmark id: string
time: number
title?: string
error error: unknown
destroy 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>