西瓜播放器官网

西瓜播放器

安装

npm install xgplayer

使用案例 vue3为例

<script setup lang="ts">
import Player from 'xgplayer'
import { ref, unref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue'
import 'xgplayer/dist/index.min.css'

const playerRef = ref<Player>()
const videoEl = ref<HTMLDivElement>()
const intiPlayer = () => {
  if (!unref(videoEl)) return
  playerRef.value = new Player({
    autoplay: false,
    url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4', //视频源
    poster: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg', //封面图
    el: unref(videoEl), //容器
    width:200,
    height:100,

  })
}

onMounted(() => {
  intiPlayer()
})


onBeforeUnmount(() => {
  unref(playerRef)?.destroy()
})
</script>

<template>
  <div ref="videoEl"></div>
</template>

其他配置请参考西瓜播放器配置进行