<script setup>
import {onMounted, ref} from "vue";
import Plyr from "plyr";
import 'plyr/dist/plyr.css';

const {src} = defineProps({
    src: {
        type: String,
        default: "",
    }
});
const plyrContainer = ref();
onMounted(() => {
    new Plyr(plyrContainer.value, {});
});
</script>

<template>
    <div class="plyrContainer">
        <video ref="plyrContainer">
            <source :src="src">
        </video>
    </div>
</template>

<style scoped lang="scss">
.plyrContainer {
    width: 70%;
}
</style>
