LivePlayer Wrapper

Vue 3 wrapper for @liveqing/liveplayer-v3 with recording and playback control features.

🚀 最新更新

v1.2.1 - 重要更新：需要单独引入 video.js：

• ⚠️ 重要变更：现在需要在使用组件前单独引入 video.js
• ✅ 修复了 Uncaught ReferenceError: videojs is not defined 错误
• ✅ 优化了依赖管理，将 video.js 设置为 peerDependency
• ✅ 提供了清晰的使用说明和示例

Installation

npm install liveplayer-wrapper

Dependencies

This component requires the following peer dependencies:

npm install video.js @liveqing/liveplayer-v3

Important: You must install and import video.js before using this component. See the usage examples below.

Usage

Global Registration

import { createApp } from 'vue'
import LivePlayerWrapper from 'liveplayer-wrapper'
import 'liveplayer-wrapper/dist/style.css'

// ⚠️ 重要：必须先引入 video.js
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

// 设置 videojs 为全局变量
window.videojs = videojs

const app = createApp(App)
app.use(LivePlayerWrapper)

Local Registration

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

// ⚠️ 重要：必须先引入 video.js
import 'video.js/dist/video-js.css'
import videojs from 'video.js'

// 设置 videojs 为全局变量
window.videojs = videojs

const videoUrl = 'your-video-stream-url'
const videoTitle = 'Live Stream'

const onPlayerReady = (player) => {
  console.log('Player is ready:', player)
}

const onRecordingStart = () => {
  console.log('Recording started')
}

const onRecordingStop = () => {
  console.log('Recording stopped')
}
</script>

Features

• Video playback with live streaming support
• Recording functionality with automatic file download
• Playback controls (play/pause, volume, fullscreen)
• Custom buttons for recording and playback toggle
• Recording protection to prevent data loss
• Responsive design with customizable aspect ratios

Props

Events

Methods

Troubleshooting

"videojs is not defined" Error

If you encounter this error, make sure:

1. You have installed video.js as a dependency:

   npm install video.js

2. 重要：在使用 LivePlayerWrapper 之前，必须先引入 video.js：

   import 'video.js/dist/video-js.css'
   import videojs from 'video.js'
   
   // 设置 videojs 为全局变量
   window.videojs = videojs

3. 或者在 HTML 中通过 CDN 引入：

   <link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" />
   <script src="https://vjs.zencdn.net/8.23.4/video.min.js"></script>

License

MIT