import { defineComponent, nextTick, onMounted } from "vue";
import 'plyr/dist/plyr.css'
import Plyr from "plyr";
import { ref } from "vue";

export default defineComponent({
    name: 'video-play',
    props:{
        item: {
            type: Object,
            default: () => {return {}}
        }
    },
    setup(props){
        const videoRef = ref()
        const item = props.item
        onMounted(() => {
            const v = new Plyr(videoRef.value, {
                muted: true
            })
            v.play()
            nextTick(() => {
                v.muted = false
            })
        })
        return () => (
            <div style={{width: '100%', height: '100%'}}>
                <video style={{width: '100%', height: '100%'}} src={item.content} ref={videoRef}></video>
            </div>
        )
    }
})