VideoPlayer 通用视频播放器组件

一个功能完整的Vue3视频播放器组件，支持播放控制、倍速调节、音量控制、全屏播放等功能。

功能特性

• ✅ 播放/暂停控制
• ✅ 进度条拖拽
• ✅ 音量控制（音量滑块、静音切换）
• ✅ 倍速播放 (0.5x - 2x)

  VideoPlayer 通用视频播放器组件

一个功能完整的Vue3视频播放器组件，支持播放控制、倍速调节、音量控制、全屏播放等功能。

功能特性

• ✅ 播放/暂停控制
• ✅ 进度条拖拽
• ✅ 音量控制
• ✅ 倍速播放 (0.5x - 2x)
• ✅ 画中画功能
• ✅ 全屏播放
• ✅ 自动隐藏控制栏
• ✅ 响应式设计
• ✅ 加载状态显示
• ✅ 错误处理
• ✅ 自定义封面图
• ✅ 循环播放
• ✅ 自动播放

基本用法

<template>
  <VideoPlayer
    :src="videoUrl"
    :poster="coverUrl"
    :controls="true"
    :autoplay="false"
    width="800px"
    height="450px"
    @play="handlePlay"
    @pause="handlePause"
  />
</template>

<script setup>
import VideoPlayer from '@/components/VideoPlayer/index.vue'

const videoUrl = 'https://example.com/video.mp4'
const coverUrl = 'https://example.com/cover.jpg'

const handlePlay = () => {
  console.log('视频开始播放')
}

const handlePause = () => {
  console.log('视频暂停')
}
</script>

Props 属性

Events 事件

Methods 方法

通过 ref 可以调用以下方法：

<template>
  <VideoPlayer ref="playerRef" :src="videoUrl" />
  <button @click="playVideo">播放</button>
  <button @click="pauseVideo">暂停</button>
</template>

<script setup>
import { ref } from 'vue'
import VideoPlayer from '@/components/VideoPlayer/index.vue'

const playerRef = ref()

const playVideo = () => {
  playerRef.value.play()
}

const pauseVideo = () => {
  playerRef.value.pause()
}

const seekTo = (time) => {
  playerRef.value.seek(time) // 跳转到指定时间
}

const setVolume = (volume) => {
  playerRef.value.setVolume(volume) // 设置音量 (0-100)
}

const setSpeed = (rate) => {
  playerRef.value.setPlaybackRate(rate) // 设置播放速度
}
</script>

使用场景

1. 模板预览

<VideoPlayer
  :src="template.video_url"
  :poster="template.cover_url"
  :autoplay="true"
  :loop="true"
  width="100%"
  height="400px"
/>

2. 视频详情页

<VideoPlayer
  :src="videoDetail.url"
  :poster="videoDetail.poster"
  :controls="true"
  :show-play-button="true"
  width="100%"
  height="500px"
  @play="onVideoPlay"
  @ended="onVideoEnded"
/>

3. 视频列表缩略图

<VideoPlayer
  :src="item.video_url"
  :poster="item.cover_url"
  :controls="false"
  :show-play-button="false"
  :muted="true"
  width="200px"
  height="150px"
/>

4. 全屏视频播放

<VideoPlayer
  :src="videoUrl"
  :controls="true"
  :autoplay="false"
  width="100vw"
  height="100vh"
/>

样式自定义

组件使用了CSS变量，可以通过覆盖这些变量来自定义样式：

.video-player {
  --primary-color: #409eff;
  --control-bg: rgba(0, 0, 0, 0.8);
  --control-text: #fff;
  --progress-bg: rgba(255, 255, 255, 0.3);
  --progress-buffer: rgba(255, 255, 255, 0.5);
}

注意事项

1. 自动播放限制：现代浏览器对自动播放有限制，建议配合 muted 属性使用
2. 全屏支持：需要浏览器支持 Fullscreen API
3. 视频格式：建议使用 MP4 格式以获得最佳兼容性
4. 响应式设计：组件已适配移动端，在小屏幕设备上会自动调整控制栏布局

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

更新日志

v1.0.0

• 初始版本发布
• 支持基本的播放控制功能
• 支持倍速播放和全屏功能
• 响应式设计适配移动端