西瓜播放器音乐组件，nustjs中使用

<template>
    <div class="demo">
        <client-only>
            <div ref="playerContainer" id="playerContainer" class="player"></div>
        </client-only>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'xgplayer/dist/index.min.css';
//import HlsPlugin from 'xgplayer-hls'
const { default: HlsPlugin } = await import('xgplayer-hls');
const props = defineProps({
    videoInfo: {
        default: {}
    },
    startTime: {
        default: 0
    }
})
const emit = defineEmits(['videoPlay', 'videoPause', 'videoEnded'])
const playerContainer = ref(null);
const url = ref('')
const sdUrl = ref('')
const hdUrl = ref('')
const fhdUrl = ref('')
const player = ref()
const resourceReady = ref([])
const claCanshu = () => {
    sdUrl.value = ''
    hdUrl.value = ''
    hdUrl.value = ''
    fhdUrl.value = ''
    if (props.videoInfo.state === undefined) {
        // 课程
        url.value = props.videoInfo.rawSource
        sdUrl.value = props.videoInfo.lowSource
        hdUrl.value = props.videoInfo.highSource
    }
    else if (props.videoInfo.state == 0) {
        url.value = props.videoInfo.beforeUrl
    } else if (props.videoInfo.state == 1) {
        url.value = props.videoInfo.url
        sdUrl.value = props.videoInfo.sdUrl
        hdUrl.value = props.videoInfo.hdUrl
        fhdUrl.value = props.videoInfo.fhdUrl
    } else {
        url.value = props.videoInfo.afterUrl
        sdUrl.value = props.videoInfo.afterSdUrl
        hdUrl.value = props.videoInfo.afterHdUrl
        fhdUrl.value = props.videoInfo.afterFhdUrl
    }

    let list = []
    if (url.value) {
        list.push({ definition: '原画质', text: '原画质', name: '原画质', url: url.value })
    }
    if (sdUrl.value) {
        list.push({ definition: '标清', text: '标清', name: '标清', url: sdUrl.value })
    }
    if (hdUrl.value) {
        list.push({ definition: '高清', text: '高清', name: '高清', url: hdUrl.value })
    }
    if (fhdUrl.value) {
        list.push({ definition: '超清', text: '超清', name: '超清', url: fhdUrl.value })
    }

    resourceReady.value = list

}
const playNext = () => {
    player.value.destroy()
    initPlayer()

}
watch(() => props.videoInfo, (newVal, oldVal) => {
    playNext()
});
onBeforeUnmount(() => {
    {
        if (player.value) {
            player.value.destroy();
        }
        player.value = null;
    }
})
const initPlayer = async () => {
    claCanshu()
    if (process.client && HlsPlugin.isSupported()) { // 确保仅在客户端执行
        const { default: Player } = await import('xgplayer');

        player.value = new Player({
            el: document.querySelector('#playerContainer'),
            plugins: url.value.endsWith('.m3u8') ? [HlsPlugin] : [],
            autoplay: false,
            startTime: props.startTime,
            url: url.value, // 替换为实际视频URL
            poster: props.videoInfo.poster,
            definitionActive: 'click',
            isLive: props.videoInfo.state == 1,
            pip: true,
            fluid: true, // 自适应容器
            playbackRate: [null],
            controlsList: ['nodownload'],
            playbackRate: {
                list: [{
                    text: '0.5X',
                    rate: 0.5
                }, {
                    text: '1X',
                    iconText: '倍速',
                    rate: 1
                }, {
                    text: '1.5X',
                    rate: 1.5
                }]
            }
        });

        // player.emit('resourceReady', [{name: '高清', url: 'url1'}, {name: '超清', url: 'url2'}]);
        player.value.emit('resourceReady', resourceReady.value)
        player.value.on('play', () => {
            emit('videoPlay', player.value)
        })
        player.value.on('pause', () => {
            emit('videoPause', player.value)
        })
        player.value.on('ended', () => {
            emit('videoEnded', player.value)
        })

    }
}
const replayPlayer = () => {
    player.value.replay()
}
onMounted(async () => {
    initPlayer()
});
defineExpose({ playNext, replayPlayer })
</script>

<style scoped>
:deep(.xgplayer .xgplayer-progress-played) {
    background: linear-gradient(-90deg, var(--color-primary) 0%, var(--color-primary) 100%);
}

:deep(.xgplayer .xg-options-list li:hover),
:deep(.xgplayer .xg-options-list li.selected) {
    color: var(--color-primary);
}

:deep(.xgplayer .xgplayer-drag) {
    background: var(--color-primary);
}

:deep(.xgplayer .xgplayer-progress-btn) {
    background: var(--color-primary);
    box-shadow: 0 0 1px var(--color-secondary-shadow);
}

.demo {}

/* 确保路径正确，根据实际安装路径调整。
通常不需要手动添加，除非有特殊需求。
通常通过npm安装后会自动包含。如果未自动包含，请手动引入。
路径可能需要根据实际安装路径调整。例如，在某些情况下，可能需要从node_modules中直接引用。
例如：import 'node_modules/xgplayer/dist/index.min.css'; 
或 import 'xgplayer/dist/index.min.css';（如果已正确安装）。
如果仍有问题，请检查node_modules中xgplayer的目录结构或查阅官方文档获取最新信息。
通常，只需安装包后，Vue项目会自动处理CSS文件的引用。如有问题，请尝试手动引入或查阅文档。
确保路径正确无误。如果仍有问题，请考虑清除npm缓存后重新安装依赖，
或检查网络问题可能导致文件未正确下载。如果问题依然存在，建议查阅最新的官方文档或社区论坛获取帮助。
通常，只需安装包后，Vue项目会自动处理CSS文件的引用。
如有问题，请尝试手动引入或查阅文档。确保路径正确无误。如果仍有问题，请考虑清除npm缓存后重新安装依赖，或检查网络问题可能导致*/

.player {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
</style>