@kinescope/vue-kinescope-player

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

General

Behavior

UI

Events

Methods