moiseyev/vue-kinescope-player

Vue bridge for the Kinescope player

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>