<template>
    <div class="player_container">
        <div ref="xgPlayerRef"></div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Player, { Events } from 'xgplayer'; // 引入西瓜视频模块
import 'xgplayer/dist/index.min.css'; // 引入西瓜视频样式

const { videoUrl } = defineProps({
    videoUrl: {
        type: String,
        default: ''
    }
})

const xgPlayerRef = ref()

import { conf } from "./config"; // 配置文件单独拎出来一个js文件

onMounted(() => { init() })

let player = null // 实例

const init = () => {
    player = new Player({
        el: xgPlayerRef.value,
        // width: 600,
        // height: 400, // 视频宽高尺寸
        isLive: false,
        url: videoUrl, // 视频源
        // poster: "http://ashuai.work/static/img/avantar.png", // 视频封面
        ...conf,
    });
    player.on(Events.PLAY, (ev) => {
        console.log('-播放开始-', ev);
    })
    player.on(Events.PAUSE, (ev) => {
        console.log('-播放结束-', ev);
    })
    player.on('loadedmetadata', (ev) => {
        console.log('-媒体数据加载好了-', ev);
    })
    player.on(Events.SEEKED, (ev) => {
        console.log('-跳着播放-', ev);
    })
}
</script>

<style lang="scss" scoped>
.player_container {
    width: 100%;
    height: 100%;

    .xgplayer {
        height: 100% !important;
    }
}
</style>

