LivePlayerWrapper

Vue 3 视频播放器包装器，基于 @liveqing/liveplayer-v3 和 video.js，提供视频播放和录制功能。

功能特性

• ✅ 支持多种视频格式（HLS、FLV、MP4等）
• ✅ 视频录制功能
• ✅ 截图功能
• ✅ 全屏控制
• ✅ 音量控制
• ✅ 播放控制
• ✅ 自定义按钮
• ✅ 响应式设计

安装

npm install liveplayer-wrapper

使用方法

1. 全局注册

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

2. 局部使用

<template>
  <div>
    <LivePlayerWrapper
      :video-url="videoUrl"
      :video-title="'测试视频'"
      :autoplay="true"
      :controls="true"
      @ready="onPlayerReady"
      @recordingStart="onRecordingStart"
      @recordingStop="onRecordingStop"
      @recordingError="onRecordingError"
    />
  </div>
</template>

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

const videoUrl = 'https://example.com/video.m3u8'

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

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

const onRecordingStop = () => {
  console.log('录制停止')
}

const onRecordingError = (error) => {
  console.error('录制错误', error)
}
</script>

3. 使用 ref 调用方法

<template>
  <div>
    <LivePlayerWrapper
      ref="playerRef"
      :video-url="videoUrl"
    />
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
    <button @click="takeSnapshot">截图</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { LivePlayerWrapper } from 'liveplayer-wrapper'

const playerRef = ref(null)
const videoUrl = 'https://example.com/video.m3u8'

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

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

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

Props 属性

Events 事件

Methods 方法

录制功能说明

1. 录制格式: 支持 WebM 格式，自动选择最佳编码器
2. 录制时长: 最大录制时间为 5 分钟
3. 文件保存: 录制完成后自动下载到本地
4. 文件名: 格式为 {视频标题}_{时间戳}.mp4

注意事项

1. 确保在使用组件前已正确安装 video.js 依赖
2. 录制功能需要浏览器支持 MediaRecorder API
3. 某些浏览器可能需要 HTTPS 环境才能使用录制功能
4. 建议在生产环境中使用 HTTPS 协议

浏览器兼容性

• Chrome 47+
• Firefox 25+
• Safari 11+
• Edge 79+

许可证

MIT License