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>
相关推荐
b1gbrother17 分钟前
让你的Claude Code变得更聪明
前端·程序员
掘金0125 分钟前
吊炸天!Vue 3组件生命周期全掌控 —— 可复用Composable黑科技封装指南
vue.js
国家不保护废物26 分钟前
多模态模型数据传输的秘密武器:html5对象Blob深度解析
前端·面试·html
用户25191624271126 分钟前
Canvas之概述,画布与画笔
前端·javascript·canvas
南方kenny26 分钟前
前端小知识:搞懂 BFC块级格式化上下文,告别面试“拦路虎”!
前端·css·面试
邵洛26 分钟前
前端导出excel表格并修改导出表格样式
前端
风舞27 分钟前
JavaScript 核心概念及代码示例的梳理
前端
学长学姐我该怎么办28 分钟前
从零开始学前端html篇2
前端·html
尘世中一位迷途小书童30 分钟前
从零实现 Canvas 图形拖拽:让你的网页动起来!
前端
mrsk30 分钟前
JavaScript之变量的解构赋值全面解析(●'◡'●)
前端·javascript·面试