@kinescope/vue-kinescope-player v2.0.0

Vue wrapper for Kinescope Embed Player

Starting from version 2.0.0, this package works with Vue 3.

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 { createApp } from 'vue'

const app = createApp(App)
app.use(KinescopePlayer)
app.mount('#app')

or import it locally in a component

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

export default {
  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 { 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

Events

Methods