LivePlayerWrapper

一个基于 Vue 3 的视频播放器包装组件，集成了 @liveqing/liveplayer-v3，提供视频播放、录制、播放控制等功能。

功能特性

• 🎥 视频播放：支持多种视频格式播放
• 📹 视频录制：支持录制视频流并下载
• 🎮 播放控制：播放/暂停、音量控制、全屏等
• 🎛️ 自定义按钮：录制、开关等自定义功能按钮
• 📱 响应式设计：支持多种宽高比设置
• 🎨 可定制样式：支持水印、自定义按钮等
• 🔧 TypeScript 支持：完整的类型定义

安装

npm install liveplayer-wrapper

使用方法

1. 全局注册

import { createApp } from 'vue'
import LivePlayerWrapper from 'liveplayer-wrapper'
import 'liveplayer-wrapper/dist/style.css' // 如果需要样式

const app = createApp(App)
app.use(LivePlayerWrapper)
app.mount('#app')

2. 局部引入

<template>
  <div>
    <LivePlayerWrapper
      :video-url="videoUrl"
      :video-title="videoTitle"
      :autoplay="true"
      :controls="true"
      @ready="onPlayerReady"
      @recordingStart="onRecordingStart"
      @recordingStop="onRecordingStop"
      @recordingError="onRecordingError"
    />
  </div>
</template>

<script setup lang="ts">
import { LivePlayerWrapper } from 'liveplayer-wrapper'
import { ref } from 'vue'

const videoUrl = ref('https://example.com/video.m3u8')
const videoTitle = ref('示例视频')

const onPlayerReady = (player: any) => {
  console.log('播放器已就绪', player)
}

const onRecordingStart = () => {
  console.log('录制开始')
}

const onRecordingStop = () => {
  console.log('录制停止')
}

const onRecordingError = (error: string) => {
  console.error('录制错误:', error)
}
</script>

3. 使用 ref 调用组件方法

<template>
  <div>
    <LivePlayerWrapper
      ref="playerRef"
      :video-url="videoUrl"
    />
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <button @click="togglePlayback">切换播放</button>
  </div>
</template>

<script setup lang="ts">
import { LivePlayerWrapper } from 'liveplayer-wrapper'
import { ref } from 'vue'

const playerRef = ref()
const videoUrl = ref('https://example.com/video.m3u8')

const startRecording = () => {
  playerRef.value?.startRecording()
}

const stopRecording = () => {
  playerRef.value?.stopRecording()
}

const togglePlayback = () => {
  playerRef.value?.togglePlayback()
}
</script>

Props 属性

Events 事件

Methods 方法

播放控制

• play() - 播放
• pause() - 暂停
• togglePlay() - 切换播放/暂停
• paused() - 获取暂停状态

播放进度

• getCurrentTime() - 获取当前播放时间
• setCurrentTime(time) - 设置播放时间

截图功能

• snap() - 截图

音量控制

• getMuted() - 获取静音状态
• setMuted(muted) - 设置静音
• toggleMute() - 切换静音
• getVolume() - 获取音量
• setVolume(volume) - 设置音量

全屏控制

• isFullscreen() - 获取全屏状态
• requestFullscreen() - 请求全屏
• exitFullscreen() - 退出全屏
• toggleFullscreen() - 切换全屏

录制功能

• startRecording() - 开始录制
• stopRecording() - 停止录制
• toggleRecording() - 切换录制
• isRecording() - 获取录制状态
• getRecordingTime() - 获取录制时长
• forceStopRecording() - 强制停止录制
• recoverFromRecordingError() - 从录制错误中恢复

播放开关功能

• togglePlayback() - 切换播放开关
• isPlaying() - 获取播放开关状态

其他功能

• getDuration() - 获取视频时长
• getPlayer() - 获取播放器实例

注意事项

1. 录制功能：录制功能需要浏览器支持 MediaRecorder API
2. 视频格式：支持 HLS、FLV、MP4 等常见格式
3. 依赖要求：需要安装 @liveqing/liveplayer-v3 和 video.js
4. 浏览器兼容性：建议使用现代浏览器以获得最佳体验

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

# 类型检查
npm run type-check

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！