LivePlayerWrapper

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

功能特性

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

安装

npm install liveplayer-wrapper

注意： 本包已内置 video.js，无需单独安装或引入 video.js。

重要更新 (v1.4.1)

🎉 VideoJS 自动初始化

问题解决: 完全修复了 ReferenceError: videojs is not defined 错误
解决方案:
- 将 video.js 打包到库内部
- 自动设置全局 videojs 变量
- 提供多重回退机制确保 videojs 始终可用
使用简化: 只需要安装 liveplayer-wrapper，无需额外配置

使用对比

之前 (需要单独引入 video.js):

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

现在 (只需引入我们的包):

<script src="liveplayer-wrapper.js"></script>

技术改进

全局变量自动设置: 自动将 videojs 设置到 window.videojs、global.videojs、globalThis.videojs 等
多重回退机制: 如果全局变量不存在，会自动重新设置
类型安全: 提供完整的 TypeScript 类型声明
错误处理: 完善的错误处理和日志输出

使用方法

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. 直接使用 (无需构建工具)

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/liveplayer-wrapper@1.4.1/dist/index.mjs"></script>
    <link href="https://unpkg.com/liveplayer-wrapper@1.4.1/dist/style.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <LivePlayerWrapper
            :video-url="'https://example.com/video.m3u8'"
            :video-title="'测试视频'"
            :autoplay="true"
            :controls="true"
        />
    </div>
    
    <script>
        const { createApp } = Vue;
        const { LivePlayerWrapper, install } = liveplayerWrapper;
        
        const app = createApp({
            template: `
                <LivePlayerWrapper
                    :video-url="'https://example.com/video.m3u8'"
                    :video-title="'测试视频'"
                    :autoplay="true"
                    :controls="true"
                />
            `
        });
        
        app.use({ install });
        app.mount('#app');
    </script>
</body>
</html>

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

属性名	类型	默认值	说明
videoUrl	String	""	视频流地址
videoTitle	String	""	视频标题
poster	String	""	视频封面图片
alt	String	"无信号"	无视频时的替代文字
autoplay	Boolean	true	自动播放
controls	Boolean	true	显示控制栏
loop	Boolean	false	循环播放
live	Boolean	true	是否为直播流
muted	Boolean	true	静音
aspect	String	"16:9"	宽高比
fluent	Boolean	true	流畅模式
stretch	Boolean	false	是否拉伸
timeout	Number	20	m3u8加载超时(秒)
showCustomButton	Boolean	true	显示自定义按钮
customButtons	String	"录制:vjs-icon-record"	自定义按钮配置

Events 事件

事件名	参数	说明
ready	player	播放器就绪
play	time	播放事件
pause	time	暂停事件
ended	-	播放结束
error	error	播放器错误
recordingStart	-	录制开始
recordingStop	-	录制停止
recordingError	error	录制错误
customButtons	buttonName	自定义按钮点击

Methods 方法

方法名	参数	返回值	说明
play	-	-	播放
pause	-	-	暂停
togglePlay	-	-	切换播放/暂停
startRecording	-	-	开始录制
stopRecording	-	-	停止录制
toggleRecording	-	-	切换录制状态
snap	-	-	截图
setVolume	volume	-	设置音量(0-1)
getVolume	-	Number	获取音量
setMuted	muted	-	设置静音
getMuted	-	Boolean	获取静音状态
toggleMute	-	-	切换静音
requestFullscreen	-	-	请求全屏
exitFullscreen	-	-	退出全屏
toggleFullscreen	-	-	切换全屏
isFullscreen	-	Boolean	是否全屏

录制功能说明

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

注意事项

VideoJS 自动初始化: 本包已内置 video.js 并自动初始化，无需手动引入
录制功能: 需要浏览器支持 MediaRecorder API
HTTPS 要求: 某些浏览器可能需要 HTTPS 环境才能使用录制功能
生产环境: 建议在生产环境中使用 HTTPS 协议
兼容性: 确保浏览器支持 ES6+ 语法

故障排除

如果仍然遇到 "videojs is not defined" 错误

检查控制台: 查看是否有初始化成功的日志信息

手动设置: 如果自动设置失败，可以手动设置：

import videojs from 'video.js';
window.videojs = videojs;

版本兼容: 确保使用的是最新版本的 liveplayer-wrapper
构建工具: 如果使用构建工具，确保正确配置了模块解析

浏览器兼容性

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

许可证

MIT License