vue3中使用西瓜视频插件xgplayer

原创已于 2024-06-27 20:52:28 修改 · 2.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

于 2024-01-31 16:33:57 首次发布

安装

npm install xgplayer

使用

<div id="player" class="eidt-left" ref="RefPlayer"></div>

<script lang="ts" setup>

import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'


const RefPlayer = ref()
onMounted(() => {
 const poster_c = new URL(`@/assets/imgs/liveRoom/courses-d.png`, import.meta.url).href
  RefPlayer.value = new Player({
    id: 'player',
    url: 'https://1255790626.vod- 
    qcloud.com/3e4588advodcq1255790626/ceeab99a388912588349426401/f0.mp4',
   autoplay: false,
    volume: 0, // 初始化时设置音量为 0，
    controls: true, // true/false决定是否使用底部控制栏，
    // plugins: [HlsJsPlugin],
    // ...props,
   
    poster: poster_c, // 封面图
    ignores: ['cssfullscreen', 'centerplay'], // 禁用播放和暂停按钮
    // ...具体参照 文档
  })
})
</script>

西瓜视频官网：西瓜播放器 | API