63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
|
<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>
|
||
|
|
|