@kinescope/vue-kinescope-player
Version:
Vue.js wrapper for Kinescope player
394 lines (369 loc) • 6.74 kB
Markdown
# Vue wrapper for Kinescope Embed Player
Starting from version 2.0.0, this package works with Vue 3.
## Installation
Using npm:
```bash
npm install @kinescope/vue-kinescope-player --save
```
Using yarn:
```bash
yarn add @kinescope/vue-kinescope-player
```
## Getting Started
You can either import it in your whole project
```js
import KinescopePlayer from '@kinescope/vue-kinescope-player'
import { createApp } from 'vue'
const app = createApp(App)
app.use(KinescopePlayer)
app.mount('#app')
```
or import it locally in a component
```js
import { KinescopePlayer } from '@kinescope/vue-kinescope-player'
export default {
components: { KinescopePlayer }
}
```
```vue
<!-- events -->
<template>
<kinescope-player
:video-id="200702846"
@ready="handleReady"
@play="handlePlay"
></kinescope-player>
</template>
```
```vue
<!-- 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 { ref } from 'vue'
import { KinescopePlayer } from '@kinescope/vue-kinescope-player'
export default {
components: { KinescopePlayer },
setup() {
const ready = ref(false)
const kinescope = ref(null)
const handleReady = () => {
ready.value = true
}
const handleClick = () => {
kinescope.value.player.play()
}
return {
ready,
kinescope,
handleReady,
handleClick
}
}
}
</script>
```
## Props
<table>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
<th>Required</th>
</tr>
<tr>
<td>video-id</td>
<td>Number, String</td>
<td>-</td>
<td>Video id from <a href="https://app.kinescope.io/">app.kinescope.io</a></td>
<td>Yes</td>
</tr>
<tr>
<td>width</td>
<td>Number, String</td>
<td>100%</td>
<td>Player width</td>
<td>No</td>
</tr>
<tr>
<td>height</td>
<td>Number, String</td>
<td>100%</td>
<td>Player height</td>
<td>No</td>
</tr>
<tr>
<td>auto-play</td>
<td>Boolean</td>
<td>false</td>
<td>The video automatically begins to playback as soon as it can do</td>
<td>No</td>
</tr>
<tr>
<td>muted</td>
<td>Boolean</td>
<td>false</td>
<td>The video starts muted</td>
<td>No</td>
</tr>
<tr>
<td>loop</td>
<td>Boolean</td>
<td>false</td>
<td>Loop the video</td>
<td>No</td>
</tr>
</table>
## Events
<table>
<tr>
<th>Event</th>
<th>Data</th>
</tr>
<tr>
<td>js-load</td>
<td>No</td>
</tr>
<tr>
<td>js-load-error</td>
<td>No</td>
</tr>
<tr>
<td>ready</td>
<td>
currentTime: number<br/>
duration: number<br/>
quality: string | number<br/>
qualityLevels: {}
</td>
</tr>
<tr>
<td>quality-changed</td>
<td>quality: string | number</td>
</tr>
<tr>
<td>auto-quality-changed</td>
<td>quality: string | number</td>
</tr>
<tr>
<td>seek-chapter</td>
<td>position: number</td>
</tr>
<tr>
<td>size-changed</td>
<td>
width: number<br/>
height: number
</td>
</tr>
<tr>
<td>play</td>
<td>No</td>
</tr>
<tr>
<td>playing</td>
<td>No</td>
</tr>
<tr>
<td>waiting</td>
<td>No</td>
</tr>
<tr>
<td>pause</td>
<td>No</td>
</tr>
<tr>
<td>ended</td>
<td>No</td>
</tr>
<tr>
<td>time-update</td>
<td>currentTime: number</td>
</tr>
<tr>
<td>progress</td>
<td>bufferedTime: number</td>
</tr>
<tr>
<td>duration-change</td>
<td>duration: number</td>
</tr>
<tr>
<td>volume-change</td>
<td>
muted: boolean<br/>
volume: number
</td>
</tr>
<tr>
<td>playback-rate-change</td>
<td>playbackRate: boolean</td>
</tr>
<tr>
<td>seeking</td>
<td>No</td>
</tr>
<tr>
<td>fullscreen-change</td>
<td>
isFullscreen: boolean<br/>
video: boolean
</td>
</tr>
<tr>
<td>call-action</td>
<td>
id: string<br/>
title?: string<br/>
type: string
</td>
</tr>
<tr>
<td>call-bookmark</td>
<td>
id: string<br/>
time: number<br/>
title?: string
</td>
</tr>
<tr>
<td>error</td>
<td>error: unknown</td>
</tr>
<tr>
<td>destroy</td>
<td>No</td>
</tr>
</table>
## Methods
<table>
<tr>
<th>Method</th>
<th>Params</th>
<th>Result</th>
</tr>
<tr>
<td>isPaused</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>isEnded</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>play</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>pause</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>stop</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getCurrentTime</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>getDuration</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>seekTo</td>
<td>(time: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>isMuted</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>mute</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>unmute</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getVolume</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>setVolume</td>
<td>(value: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getPlaybackRate</td>
<td>No</td>
<td>Promise<number></td>
</tr>
<tr>
<td>setPlaybackRate</td>
<td>(value: number)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>getVideoQualityList</td>
<td>No</td>
<td>Promise<VideoQuality[]></td>
</tr>
<tr>
<td>getCurrentVideoQuality</td>
<td>No</td>
<td>Promise<VideoQuality></td>
</tr>
<tr>
<td>setVideoQuality</td>
<td>(quality: VideoQuality)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>enableTextTrack</td>
<td>(lang: string)</td>
<td>Promise<void></td>
</tr>
<tr>
<td>disableTextTrack</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>closeCTA</td>
<td>No</td>
<td>Promise<void></td>
</tr>
<tr>
<td>isFullscreen</td>
<td>No</td>
<td>Promise<boolean></td>
</tr>
<tr>
<td>setFullscreen</td>
<td>(fullscreen: boolean)</td>
<td>Promise<void></td>
</tr>
</table>