vue3-liveplayer-wrapper
Version:
Vue 3 wrapper for @liveqing/liveplayer-v3 with recording and playback control features - Fully compatible with Vue 3.5+
238 lines (181 loc) • 5.48 kB
Markdown
# LivePlayer 视频播放器 Vue 3 包装器
一个功能完整的 Vue 3 视频播放器包装器，基于 `@liveqing/liveplayer-v3` 和 `video.js`，支持视频播放、录制、播放控制等功能。
## 🚀 特性
- ✅ 完全兼容 Vue 3.5+
- 🎥 支持多种视频格式 (HLS, FLV, RTMP 等)
- 📹 内置录制功能
- 🎮 完整的播放控制
- 🖼️ 截图功能
- 🎛️ 自定义按钮和工具栏
- 📱 响应式设计
- 🔧 TypeScript 支持
- 📦 **自包含依赖** - 无需单独安装 video.js 和 @liveqing/liveplayer-v3
## 📦 安装
**现在只需要安装一个包！**
```bash
# 使用 npm 安装
npm install vue3-liveplayer-wrapper@1.3.6
# 或使用 yarn
yarn add vue3-liveplayer-wrapper@1.3.6
# 或使用 pnpm
pnpm add vue3-liveplayer-wrapper@1.3.6
```
## 🎯 重要更新
### v1.3.6 - 自包含依赖版本
- ✅ **自包含依赖**: 将 `video.js` 和 `@liveqing/liveplayer-v3` 打包进库中
- ✅ **简化安装**: 用户只需要安装 `vue3-liveplayer-wrapper` 一个包
- ✅ **无需额外配置**: 不再需要在 HTML 中手动引入依赖
- ✅ **解决 videojs 未定义问题**: 内置依赖确保兼容性
### 旧版本 (v1.3.5 及以下)
如果使用旧版本，仍需要手动引入依赖：
```html
<html>
<head>
<!-- Video.js CSS -->
<link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" />
<!-- Video.js 依赖 -->
<script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>
<!-- LivePlayer 依赖 -->
<script src="/node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
## 🚨 常见问题解决
### ReferenceError: videojs is not defined
**v1.3.6+ 版本**: 这个问题已经自动解决，因为依赖被打包进库中。
**v1.3.5 及以下版本**: 如果遇到此错误，请按以下步骤解决：
1. **确保正确引入 video.js**
```html
<script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>
```
2. **检查脚本加载顺序**
- video.js 必须在 LivePlayer 之前加载
- 确保所有脚本都成功加载
3. **验证全局变量**
```javascript
// 在浏览器控制台中检查
console.log(window.videojs);
```
## 📖 使用方法
### 基本用法 (推荐 v1.3.6+)
```vue
<template>
<LivePlayerWrapper
:video-url="videoUrl"
:video-title="'我的视频'"
:autoplay="true"
:controls="true"
@ready="onPlayerReady"
@error="onPlayerError"
/>
</template>
<script setup>
import LivePlayerWrapper from 'vue3-liveplayer-wrapper'
const videoUrl = 'https://example.com/video.m3u8'
const onPlayerReady = (player) => {
console.log('播放器就绪:', player)
}
const onPlayerError = (error) => {
console.error('播放器错误:', error)
}
</script>
```
### 录制功能
```vue
<template>
<LivePlayerWrapper
ref="playerRef"
:video-url="videoUrl"
@recordingStart="onRecordingStart"
@recordingStop="onRecordingStop"
@recordingError="onRecordingError"
/>
<button @click="toggleRecording">
{{ isRecording ? '停止录制' : '开始录制' }}
</button>
</template>
<script setup>
import { ref } from 'vue'
import LivePlayerWrapper from 'vue3-liveplayer-wrapper'
const playerRef = ref(null)
const isRecording = ref(false)
const videoUrl = 'https://example.com/video.m3u8'
const toggleRecording = () => {
if (isRecording.value) {
playerRef.value?.stopRecording()
} else {
playerRef.value?.startRecording()
}
}
const onRecordingStart = () => {
isRecording.value = true
console.log('录制开始')
}
const onRecordingStop = () => {
isRecording.value = false
console.log('录制停止')
}
const onRecordingError = (error) => {
console.error('录制错误:', error)
}
</script>
```
## 🎯 组件属性
| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `videoUrl` | String | `""` | 视频流地址 |
| `videoTitle` | String | `""` | 视频标题 |
| `autoplay` | Boolean | `true` | 自动播放 |
| `controls` | Boolean | `true` | 显示控制栏 |
| `muted` | Boolean | `true` | 静音播放 |
| `live` | Boolean | `true` | 是否为直播流 |
## 📡 事件
| 事件名 | 参数 | 说明 |
|--------|------|------|
| `ready` | `player` | 播放器就绪 |
| `play` | `time` | 开始播放 |
| `pause` | `time` | 暂停播放 |
| `error` | `error` | 播放错误 |
| `recordingStart` | - | 录制开始 |
| `recordingStop` | - | 录制停止 |
| `recordingError` | `error` | 录制错误 |
## 🛠️ 开发
### 本地开发
```bash
# 安装依赖
npm install
# 启动开发服务器
npm run dev
# 构建库
npm run build:lib
# 类型检查
npm run type-check
```
### 构建配置
项目包含两个 Vite 配置：
- `vite.config.ts` - 开发环境配置
- `vite.lib.config.ts` - 库构建配置
## 📝 更新日志
### v1.3.6
- ✅ **自包含依赖**: 将 video.js 和 @liveqing/liveplayer-v3 打包进库中
- ✅ **简化安装**: 用户只需要安装一个包
- ✅ **自动解决 videojs 未定义问题**
- ✅ **无需额外配置**
### v1.3.5
- 修复 `ReferenceError: videojs is not defined` 错误
- 优化 video.js 加载机制
- 添加备用加载方案
- 改进类型声明
- 更新依赖配置
### v1.3.4
- 添加录制功能
- 支持播放控制
- 添加自定义按钮
## 🤝 贡献
欢迎提交 Issue 和 Pull Request！
## �� 许可证
MIT License