vue使用西瓜视频插件xgplayer

Vue2

npm install xgplayer-vue@latest

引入xgplayer，封装成一个公共组件

src/components/xgPlayer/xgPlayer.vue

javascript 复制代码

<template>
  <Xgplayer :config="config" @player="Player = $event" />
</template>

<script>
import Xgplayer from 'xgplayer-vue'
export default {
  components: {
    Xgplayer
  },
  data () {
    return {
      config: {
        id: 'vs',
        url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4', // 修改为能播放的视频地址
        width: '50%', // 宽度可以是 数字 ，也可以是百分比
        height: 500,
        // autoplay: true,
        download: true,
        poster: 'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
        playbackRate: [0.5, 0.75, 1, 1.5, 2] // 倍速
      },
      Player: null
    }
  }
}

</script>

<style>
#xgPlayer{
  border: 1px solid red;
}
</style>

组件中使用

javascript 复制代码

<template>
  <div>
    <h1>播放器</h1>
    <Player  />
  </div>
</template>

<script>
import Player from '@/components/xgPlayer/xgPlayer.vue'
export default {
  name: 'chartContainer',
  components: {
    Player
  },
</script>

<style>

</style>

Vue3

javascript 复制代码

<template>
  <div style="width: 100%; height: 100%"
       :id="id"></div>
</template>
<script setup>
import { onMounted, watch } from 'vue'
import Player from 'xgplayer'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  videoUrl: {
    type: String,
    default: () =>
      'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
  },
  poster: {
    type: String,
    default: () =>
      'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
  },
  playsinline: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '50%',
  },
  height: {
    type: String,
    default: '50%',
  },
})

watch(
  () => props.videoUrl,
  (newUrl) => {
    initPlayer()
  },
  {
    deep: true,
  }
)

onMounted(() => {
  initPlayer()
})

// 初始化西瓜视频
const initPlayer = () => {
  let player = new Player({
    id: props.id,
    url: props.videoUrl,
    poster: props.poster,
    playsinline: props.playsinline,
    height: props.height,
    width: props.width,
    thumbnail: {
      pic_num: 44,
      width: 160,
      height: 90,
      col: 10,
      row: 10,
      urls: [
        '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg',
      ],
    },
    danmu: {
      comments: [
        {
          duration: 15000,
          id: '1',
          start: 3000,
          txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
          style: {
            //弹幕自定义样式
            color: '#ff9500',
            fontSize: '20px',
            border: 'solid 1px #ff9500',
            borderRadius: '50px',
            padding: '5px 11px',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
          },
        },
      ],
      area: {
        start: 0,
        end: 1,
      },
    },
    whitelist: [''],
  })
  //  超清、高清、标清 分别对应的地址
  player.emit('resourceReady', [
    {
      name: '超清',
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    },
    {
      name: '高清',
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    },
    {
      name: '标清',
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
    }
  ])
}
</script>

javascript 复制代码

<template>

  <div class="bigBox">
    <h1>播放器</h1>
    <XgPlayer :id="'xgPlayer'" />
  </div>

</template>


<script lang="ts" setup>
import XgPlayer from '@/components/xgPlayer/xgPlayer.vue'
import 'xgplayer/dist/index.min.css'
</script>


<style scoped>
.bigBox{
  height: 95vh !important;
}
</style>