ht-player

一个基于 Vue 3 的视频监控播放器组件，支持预览、回放、对讲等功能。该组件专为视频监控场景设计，提供了丰富的控制功能和灵活的配置选项。

特性

- 🎥 支持多路视频预览
- 🔄 支持视频回放
- 🎤 支持双向对讲
- 📸 支持视频抓图
- 📹 支持视频录制
- 🔊 支持音量控制
- 🖥️ 支持多分屏显示
- 📱 支持移动端适配
- 🎨 支持自定义控制面板
- 🚀 支持自动播放

安装

``bash


使用 npm

npm install ht-player-demo

使用 yarn

yarn add ht-player-demo

使用 pnpm

pnpm add ht-player-demo
`

快速开始

$3

`vue



`

Props 配置

| 属性 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| urls | Object | - | 是 | 播放地址配置，包含 realplay、talk、playback 三个地址 |
| showControls | Boolean | false | 否 | 是否显示控制面板 |
| width | String/Number | '100%' | 否 | 播放器宽度 |
| height | String/Number | '100%' | 否 | 播放器高度 |
| autoplay | Boolean | false | 否 | 是否自动播放，设为 true 时会在播放器初始化完成后自动调用预览方法 |

初始化回调

播放器提供了多个初始化相关的回调函数，用于监听播放器的不同状态：

| 回调函数 | 说明 | 参数 | 示例 |
|----------|------|------|------|
| onInit | 播放器初始化完成回调 | player: 播放器实例 | onInit: (player) => { console.log('播放器初始化完成', player) } |
| onReady | 播放器准备就绪回调 | player: 播放器实例 | onReady: (player) => { console.log('播放器准备就绪', player) } |
| onError | 播放器错误回调 | error: 错误信息 | onError: (error) => { console.error('播放器错误:', error) } |
| onLoad | 播放器加载完成回调 | player: 播放器实例 | onLoad: (player) => { console.log('播放器加载完成', player) } |
| onDestroy | 播放器销毁回调 | - | onDestroy: () => { console.log('播放器已销毁') } |

使用示例：

`vue



`

方法

$3

`vue

`

$3

`vue

`

$3

`vue

`

$3

`vue

`

$3

`vue

`

$3

`vue

`

事件

组件支持以下事件：

| 事件名 | 说明 | 回调参数 |
|--------|------|----------|
| ready | 播放器准备就绪 | - |
| error | 播放器错误 | error: 错误信息 |
| play | 开始播放 | - |
| pause | 暂停播放 | - |
| stop | 停止播放 | - |
| fullscreen | 全屏状态改变 | isFullscreen: 是否全屏 |

使用示例：

`vue



`

最佳实践

$3

建议对所有播放器操作进行错误处理：

`vue

`

$3

确保在组件销毁时正确释放资源：

`vue

`

$3

- 使用 v-show 而不是 v-if 来控制播放器的显示/隐藏
- 在不需要时及时停止播放和释放资源
- 合理使用分屏数量，避免同时打开过多视频流

注意事项

1. 播放地址配置
- 确保提供的播放地址可访问
- 建议在使用前先测试地址可用性
- 注意区分 ws 和 wss 协议

2. 浏览器兼容性
- 建议使用现代浏览器（Chrome、Firefox、Safari、Edge 等）
- 移动端仅支持 1x1 和 2x2 分屏模式

3. 资源加载
- 确保播放器相关的 JS 文件已正确加载
- 建议在 index.html` 中预加载播放器文件

4. 性能考虑
- 避免同时打开过多视频流
- 及时释放不需要的资源
- 合理使用录制和抓图功能

5. 安全建议
- 使用 HTTPS/WSS 协议传输视频流
- 注意保护播放地址等敏感信息
- 实现适当的访问控制

常见问题

1. Q: 播放器无法加载怎么办？
A: 检查播放器 JS 文件是否正确加载，确保网络连接正常。

2. Q: 视频流无法播放怎么办？
A: 检查播放地址是否正确，确认服务器是否正常运行。

3. Q: 对讲功能无响应怎么办？
A: 检查麦克风权限是否已授权，确认对讲服务器是否正常。

4. Q: 录制文件保存在哪里？
A: 录制文件默认保存在浏览器的下载目录，文件名包含时间戳。

更新日志

$3

- 初始版本发布
- 支持基础播放功能
- 支持分屏控制
- 支持对讲功能
- 支持回放功能

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

许可证

MIT License