LivePlayer Wrapper

Vue 3 wrapper for @liveqing/liveplayer-v3 with video recording and playback control features. Fixed VideoJS global variable issues.

安装

1. 安装主要依赖

npm install liveplayer-wrapper@1.5.1

2. 安装 videojs 依赖

由于 videojs 被设置为 peer dependency，你需要单独安装：

npm install video.js

3. 安装 Vue 3 (如果还没有安装)

npm install vue@^3.3.0

4. 一键安装所有依赖

npm install liveplayer-wrapper@1.5.1 video.js vue@^3.3.0

使用方法

全局注册

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')

局部使用

<template>
  <LivePlayerWrapper
    :video-url="videoUrl"
    :video-title="videoTitle"
    @ready="onPlayerReady"
    @recordingStart="onRecordingStart"
    @recordingStop="onRecordingStop"
  />
</template>

<script setup>
import { LivePlayerWrapper } from 'liveplayer-wrapper'
import 'liveplayer-wrapper/dist/style.css'

const videoUrl = 'your-video-stream-url'
const videoTitle = '视频标题'

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

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

const onRecordingStop = () => {
  console.log('录制结束')
}
</script>

重要说明

VideoJS 依赖管理

本组件将 video.js 设置为 peer dependency，这意味着：

1. 你需要单独安装 video.js：npm install video.js
2. 确保版本兼容：建议使用 ^8.0.0 版本
3. 全局变量自动设置：组件会自动设置 window.videojs 全局变量

为什么这样设计？

• 避免重复打包：防止多个组件同时打包 videojs
• 版本控制：用户可以控制使用的 videojs 版本
• 兼容性：确保与 @liveqing/liveplayer-v3 的兼容性

主要功能

• ✅ 视频播放控制
• ✅ 录制功能
• ✅ 截图功能
• ✅ 全屏控制
• ✅ 音量控制
• ✅ 播放进度控制
• ✅ 自定义按钮
• ✅ 事件监听

Props

Events

方法

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

const playerRef = ref()

// 播放控制
playerRef.value.play()
playerRef.value.pause()
playerRef.value.togglePlay()

// 录制功能
playerRef.value.startRecording()
playerRef.value.stopRecording()
playerRef.value.toggleRecording()

// 截图
playerRef.value.snap()

// 全屏控制
playerRef.value.requestFullscreen()
playerRef.value.exitFullscreen()

故障排除

"videojs is not defined" 错误

如果遇到这个错误，请确保：

1. 已正确安装 video.js：npm install video.js
2. 在组件使用前已导入样式：import 'liveplayer-wrapper/dist/style.css'
3. 检查控制台是否有其他相关错误

录制功能不工作

确保：

1. 视频正在播放
2. 浏览器支持 MediaRecorder API
3. 用户已授权摄像头/麦克风权限

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

License

MIT