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

Events

Methods