<!-- 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>