vue3-liveplayer-wrapper

v1.3.7

Published

4 months ago

Vue 3 wrapper for @liveqing/liveplayer-v3 with recording and playback control features - Fully compatible with Vue 3.5+

Downloads

0High
0Medium
0Low

wangshiqin

vue vue3 vue3.5 video player liveplayer recording streaming hls flv compatible

LivePlayer 视频播放器 Vue 3 包装器

一个功能完整的 Vue 3 视频播放器包装器，基于 @liveqing/liveplayer-v3 和 video.js，支持视频播放、录制、播放控制等功能。

🚀 特性

✅ 完全兼容 Vue 3.5+
🎥 支持多种视频格式 (HLS, FLV, RTMP 等)
📹 内置录制功能
🎮 完整的播放控制
🖼️ 截图功能
🎛️ 自定义按钮和工具栏
📱 响应式设计
🔧 TypeScript 支持
📦 自包含依赖 - 无需单独安装 video.js 和 @liveqing/liveplayer-v3

📦 安装

现在只需要安装一个包！

# 使用 npm 安装
npm install [email protected]

# 或使用 yarn
yarn add [email protected]

# 或使用 pnpm
pnpm add [email protected]

🎯 重要更新

v1.3.6 - 自包含依赖版本

✅ 自包含依赖: 将 video.js 和 @liveqing/liveplayer-v3 打包进库中
✅ 简化安装: 用户只需要安装 vue3-liveplayer-wrapper 一个包
✅ 无需额外配置: 不再需要在 HTML 中手动引入依赖
✅ 解决 videojs 未定义问题: 内置依赖确保兼容性

旧版本 (v1.3.5 及以下)

如果使用旧版本，仍需要手动引入依赖：

<!DOCTYPE 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 及以下版本: 如果遇到此错误，请按以下步骤解决：

确保正确引入 video.js

<script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>

检查脚本加载顺序
- video.js 必须在 LivePlayer 之前加载
- 确保所有脚本都成功加载

验证全局变量

// 在浏览器控制台中检查
console.log(window.videojs);

📖 使用方法

基本用法 (推荐 v1.3.6+)

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

录制功能

<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 | 录制错误 |

🛠️ 开发

本地开发

# 安装依赖
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