HT-H5Player Vue3

基于 Vue3 的视频监控播放器组件，支持多路视频流播放、分屏显示、全屏切换等功能。

特性

• 🎥 支持多路视频流同时播放
• 📱 支持分屏显示（1-4路）
• 🔄 支持实时预览和回放
• 📐 响应式布局，支持移动端适配
• 🖥️ 支持全屏切换
• 🎯 支持对讲功能
• 🎨 基于 Ant Design Vue 3.x 的 UI 组件

安装

# npm
npm install ht-h5player-vue3

# yarn
yarn add ht-h5player-vue3

# pnpm
pnpm add ht-h5player-vue3

使用

全局注册

import { createApp } from 'vue'
import App from './App.vue'
import H5playerPlugin from 'ht-h5player-vue3'

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

局部引入

<template>
  <h5-player 
    :config="playerConfig" 
    @onSuccess="handleSuccess" 
    @on-error="handleError"
    @on-talk-end="handleTalkEnd"
  ></h5-player>
</template>

<script setup>
import { ref } from 'vue'
import { H5Player } from 'ht-h5player-vue3'

const playerConfig = ref({
  maxSplit: 4,        // 最大分屏数
  defaultSplitNum: 1, // 默认分屏数
  splitNum: 1         // 当前分屏数
})

const handleSuccess = (player) => {
  console.log('播放器初始化成功', player)
}

const handleError = (error) => {
  console.error('播放器错误', error)
}

const handleTalkEnd = () => {
  console.log('对讲结束')
}
</script>

Props

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | config | 播放器配置项 | Object | {} |

config 配置项

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | maxSplit | 最大分屏数 | Number | 4 | | defaultSplitNum | 默认分屏数 | Number | 1 | | splitNum | 当前分屏数 | Number | 1 |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | onSuccess | 播放器初始化成功时触发 | player: 播放器实例 | | on-error | 播放器发生错误时触发 | error: 错误信息 | | on-talk-end | 对讲结束时触发 | - |

Methods

通过 ref 可以调用以下方法：

| 方法名 | 说明 | 参数 | |--------|------|------| | stopAllPlay | 停止所有窗口播放 | - | | handleFullscreen | 切换全屏显示 | - | | stopTalk | 停止对讲 | - |

注意事项

1. 确保项目中已安装 ant-design-vue 依赖
2. 播放器需要正确的视频流地址才能播放
3. 建议在组件销毁时调用 stopAllPlay 方法停止播放
4. 移动端适配已内置，无需额外配置

开发环境

• Vue 3.3.0+
• Ant Design Vue 3.2.20+
• Node.js 14.0.0+

许可证

ISC