LivePlayer Wrapper

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

🚀 最新更新

v1.1.3 - 修复了 videojs is not defined 错误：

• ✅ 将 videojs 打包到本地库中，不再依赖外部 npm 包
• ✅ 确保 videojs 在全局环境中正确可用
• ✅ 优化了构建配置，提高了兼容性
• ✅ 添加了完整的测试示例

🔧 问题修复

如果您之前遇到 Uncaught ReferenceError: videojs is not defined 错误，现在这个问题已经解决。videojs 现在直接打包在库中，无需额外安装。

Features

• 🎥 Video streaming support (HLS, FLV, RTMP, etc.)
• 📹 Screen recording functionality
• 🎮 Playback control (play, pause, volume, fullscreen)
• 🎛️ Customizable UI controls
• 📱 Responsive design
• 🎨 Customizable styling
• 🔧 TypeScript support

Installation

npm install liveplayer-wrapper

Usage

Basic Usage

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

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

const videoUrl = ref('https://example.com/stream.m3u8')
const videoTitle = ref('Live Stream')

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

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

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

const onRecordingError = (error: string) => {
  console.error('Recording error:', error)
}
</script>

Plugin Installation

import { createApp } from 'vue'
import App from './App.vue'
import LivePlayerWrapper from 'liveplayer-wrapper'

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

Global Component Registration

import { createApp } from 'vue'
import App from './App.vue'
import { LivePlayerWrapper } from 'liveplayer-wrapper'

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

Props

Events

Methods

Playback Control

• play() - Start playback
• pause() - Pause playback
• togglePlay() - Toggle play/pause
• paused() - Check if paused
• getCurrentTime() - Get current time
• setCurrentTime(time: number) - Set current time
• getDuration() - Get video duration

Volume Control

• getMuted() - Check if muted
• setMuted(muted: boolean) - Set muted state
• toggleMute() - Toggle mute
• getVolume() - Get volume (0-1)
• setVolume(volume: number) - Set volume

Fullscreen Control

• isFullscreen() - Check fullscreen state
• requestFullscreen() - Enter fullscreen
• exitFullscreen() - Exit fullscreen
• toggleFullscreen() - Toggle fullscreen

Recording

• startRecording() - Start recording
• stopRecording() - Stop recording
• toggleRecording() - Toggle recording
• isRecording() - Check recording state
• getRecordingTime() - Get recording duration
• forceStopRecording() - Force stop recording
• recoverFromRecordingError() - Recover from error

Playback Switch

• togglePlayback() - Toggle video on/off
• isPlaying() - Check if video is playing

Other

• snap() - Take screenshot
• getPlayer() - Get player instance

Example

<template>
  <div class="video-container">
    <LivePlayerWrapper
      ref="playerRef"
      :video-url="streamUrl"
      :video-title="streamTitle"
      :autoplay="true"
      :controls="true"
      :live="true"
      :muted="false"
      :aspect="'16:9'"
      :show-custom-button="true"
      :custom-buttons="'录制:vjs-icon-record,开关:vjs-icon-switch'"
      @ready="onPlayerReady"
      @recordingStart="onRecordingStart"
      @recordingStop="onRecordingStop"
      @recordingError="onRecordingError"
      @customButtons="onCustomButtonClick"
    />
    
    <div class="controls">
      <button @click="startRecording">Start Recording</button>
      <button @click="stopRecording">Stop Recording</button>
      <button @click="togglePlayback">Toggle Playback</button>
    </div>
  </div>
</template>

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

const playerRef = ref()
const streamUrl = ref('https://example.com/live.m3u8')
const streamTitle = ref('Live Stream')

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

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

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

const onRecordingError = (error: string) => {
  console.error('Recording error:', error)
}

const onCustomButtonClick = (buttonName: string) => {
  console.log('Custom button clicked:', buttonName)
}

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

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

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

<style scoped>
.video-container {
  max-width: 800px;
  margin: 0 auto;
}

.controls {
  margin-top: 20px;
  text-align: center;
}

.controls button {
  margin: 0 10px;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.controls button:hover {
  background: #0056b3;
}
</style>

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build:lib

# Build example
npm run build

🧪 测试

快速测试

1. 构建库：

npm run build:lib

2. 打开测试页面：

• test-videojs.html - 基础功能测试
• example-usage.html - 完整使用示例

验证 VideoJS 可用性

在浏览器控制台中运行：

console.log('VideoJS available:', typeof window.videojs !== 'undefined');

如果返回 true，说明 VideoJS 已正确加载。

License

MIT