<template>
	<video ref="player" />
</template>

<script lang="ts" setup>
import "plyr/dist/plyr.css";
import Plyr from "plyr";
import { computed, onUnmounted, ref } from "vue";

const player = ref<HTMLVideoElement | null>(null);

const plyr = computed(() => {
	if (!player.value) return null;

	return new Plyr(player.value, { autoplay: true });
});

onUnmounted(() => {
	if (!plyr.value) return;

	try {
		plyr.value.destroy();
	} catch (error) {
		console.error(error);
	}
});

onMounted(() => {
  if (!plyr.value) return;

  // use plyr instance
})
</script>