@peakchao/video-player-vue3

一个基于 Vue 3 的现代化、功能丰富的视频播放器组件。

特性

• 基础播放控制: 播放、暂停、音量调节、进度条拖拽。
• 高级功能: 全屏、画中画、循环播放、镜像画面。
• 视频源管理: 支持多清晰度切换、多集切换。
• 可定制化: 支持自定义主题颜色、播放器尺寸、背景等。
• 用户体验: 快捷键支持、操作状态提示、关灯模式。
• 响应式设计: 自动适应容器宽度。

安装

使用 npm:

npm install @peakchao/video-player-vue3

或者 yarn:

yarn add @peakchao/video-player-vue3

快速上手

在你的 Vue 组件中导入并使用 VideoPlayer：

<template>
  <VideoPlayer :sources="videoSources" />
</template>

<script setup>
import { VideoPlayer } from '@peakchao/video-player-vue3';
import '@peakchao/video-player-vue3/style';

const videoSources = [
  {
    quality: '1080p',
    src: 'https://example.com/video-1080p.mp4',
    poster: 'https://example.com/poster.jpg'
  },
  {
    quality: '720p',
    src: 'https://example.com/video-720p.mp4',
  }
];
</script>

Props

| Prop | Type | Default | Description | | ----------------- | ------------------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------- | | sources | VideoSource[] | [{ quality: '', src: '', poster: '' }] | 视频源列表，用于清晰度切换。 | | episodes | Episode[] | [] | 剧集列表，用于多集播放。 | | themeConfig | ThemeConfig | { themeColor: '#FF0088', progressBarPlayedColor: '#FF0088', progressBarBufferedColor: '#FFB380', progressBarBg: '#FFF2EC' } | 主题颜色配置。 | | radius | Boolean | true | 是否显示圆角。 | | background | String | 'black' | 播放器背景色。 | | autoplay | Boolean | false | 是否自动播放。 | | loop | Boolean | false | 是否循环播放。 | | muted | Boolean | false | 是否静音。 | | theme | 'light' \| 'dark' | 'light' | 主题模式。 | | width | Number \| String | '100%' | 播放器宽度。 | | height | Number \| String | null | 播放器高度。 | | aspectRatio | String | '16/9' | 播放器宽高比。 | | progressBarHeight | String | '4px' | 进度条高度。 | | playbackRates | number[] | [0.5, 1, 1.5, 2, 2.5, 3] | 可用的播放倍速列表。 |

类型定义

export interface VideoSource {
  quality?: string;
  src: string;
  poster?: string;
}

export interface Episode {
  title: string;
  src: string;
}

export interface ThemeConfig {
  themeColor: string;
  progressBarPlayedColor: string;
  progressBarBufferedColor: string;
  progressBarBg: string;
}

Events

| Event | Payload | Description | | ---------------------- | --------------------------------------------- | ------------------------------------------ | | play | () | 视频开始播放时触发。 | | pause | () | 视频暂停时触发。 | | ended | () | 视频播放结束时触发。 | | timeupdate | (currentTime: number, duration: number) | 播放时间更新时触发。 | | progress | (buffered: TimeRanges) | 视频缓冲进度更新时触发。 | | volumechange | (volume: number, muted: boolean) | 音量或静音状态改变时触发。 | | fullscreenchange | (isFullscreen: boolean) | 进入或退出全屏时触发。 | | enterpictureinpicture| () | 进入画中画模式时触发。 | | leavepictureinpicture| () | 退出画中画模式时触发。 | | qualitychange | (src: string) | 清晰度切换时触发。 | | episodechange | (src: string) | 剧集切换时触发。 | | playbackratechange | (rate: number) | 播放倍速改变时触发。 | | loopchange | (isLooping: boolean) | 循环播放状态改变时触发。 | | mirrorchange | (isMirrored: boolean) | 镜像模式状态改变时触发。 | | lightsoffchange | (isLightsOff: boolean) | 关灯模式状态改变时触发。 |

贡献

欢迎提交 issue 和 pull request！

许可证

ISC