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>
相关推荐
FogLetter11 分钟前
从原生JS事件到React事件机制:深入理解前端事件处理
前端·javascript·react.js
陈cCCc11 分钟前
记录第一次npm发包!!!
vue.js·npm
轻语呢喃13 分钟前
js事件机制:监听、捕获、冒泡与委托
javascript
小公主23 分钟前
如何利用闭包封装私有变量?掌握防抖、节流与 this 问题的巧妙解决方案
前端
烛阴26 分钟前
JavaScript 的动态魔法:使用 constructor 动态创建函数
前端·javascript
前端极客探险家31 分钟前
Spring Boot + Vue.js 全栈开发:从前后端分离到高效部署,打造你的MVP利器!
vue.js·spring boot·后端
前端 贾公子37 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder1 小时前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛1 小时前
vue3中实现echarts打印功能
前端·vue.js·echarts
一只卡比兽1 小时前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript