XGPlayer Vue Component

A Vue 3 component wrapper for xgplayer.

Features

• 📦 Zero Config: Styles are automatically injected, no need to import CSS manually.
• 🎨 Tailwind CSS: Built-in Tailwind CSS support for custom plugins and controls.
• 🚀 Vue 3: Native Vue 3 implementation with TypeScript support.
• 🧩 Plugins: Includes useful plugins like Next/Prev chunk buttons.
• 🔁 Multi-chunk Playback: Supports switching and continuous playback across multiple video segments.

Installation

npm install xgplayer-vue3
# or
pnpm add xgplayer-vue3

Usage

You don't need to import any CSS files, they are automatically injected when the component is loaded.

<script setup lang="ts">
import { XGPlayer } from 'xgplayer-vue3';

const playerConfig = {
  url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
  poster: 'https://media.w3.org/2010/05/sintel/poster.png',
  autoplay: false,
  width: '100%',
  height: '100%',
};
</script>

<template>
  <XGPlayer v-bind="playerConfig" />
</template>

Multi-chunk Playback

<script setup lang="ts">
import { XGPlayer } from 'xgplayer-vue3'

const testUrl = 'https://media.w3.org/2010/05/sintel/trailer.mp4'

const playerConfig = {
  title: '测试视频',
  urls: [testUrl, testUrl],
  autoplay: false,
  showChunkButtons: true,
  width: '100%',
  height: '100%',
}
</script>

<template>
  <XGPlayer v-bind="playerConfig" />
</template>

Props

• url: Video URL (string)
• urls: Array of video URLs for multi-part playback (string[])
• poster: Poster image URL
• autoplay: Boolean (default: true)
• width: Width (default: 100%)
• height: Height (default: 100%)
• volume: Default volume (0-100)
• playbackRate: Array of playback rates (default: [0.5, 0.75, 1, 1.5, 2])
• isLive: Boolean (default: false)
• muted: Boolean (default: true)
• title: Video title
• cssFullscreen: Enable CSS fullscreen
• download: Enable download
• enableContextmenu: Enable context menu
• tags: Progress dots configuration
• plugins: Array of xgplayer plugins
• ... and more xgplayer options

Events

• ended: Emitted when playback ends

Development

pnpm install
pnpm dev
pnpm build

Preview

To preview the component in a simulated third-party environment:

pnpm run preview