Ht-h5player NPM

vue-h5player

基于 Vue.js 的 H5 视频播放器组件，支持实时预览、录像回放、语音对讲等功能。

特性

🎯 支持多分屏显示（1x1, 2x2, 3x3, 4x4）
🔊 支持语音对讲
📺 支持实时预览和录像回放
📱 自适应移动端
⚡ 支持 MSE 和解码器两种播放模式
🎨 基于 Ant Design Vue 的美观界面

安装

bash npm install ht-h5player --save 或 yarn add ht-h5player

使用

全局注册

mport Vue from 'vue' import H5Player from 'ht-h5player' import 'ant-design-vue/dist/antd.css' Vue.use(H5Player)

局部注册

import { H5Player } from 'ht-h5player' export default { components: { H5Player } }

基础用法

<template>
<h5-player
:base-path="basePath"
:max-split="4"
:default-urls="urls"
@on-play="handlePlay"
@on-error="handleError"
/>
</template>
<script>
export default {
data() {
return {
basePath: '/static/',
urls: {
realplay: 'ws://your-realplay-url',
talk: 'ws://your-talk-url',
playback: 'ws://your-playback-url'
}
}
},
methods: {
handlePlay(info) {
console.log('播放信息：', info)
},
handleError(err) {
console.error('播放错误：', err)
}
}
}
</script>

API

Props

参数	说明	类型	默认值
basePath	播放器资源基础路径	String	'./'
maxSplit	最大分屏数	Number	4
defaultUrls	默认播放地址配置	Object	{}
showControls	是否显示控制栏	Boolean	true
autoplay	是否自动播放	Boolean	false
muted	是否静音	Boolean	false

Events

事件名称	说明	回调参数
on-play	开始播放时触发	info: { windowIndex, url, type }
on-error	播放错误时触发	error: Error
on-stop	停止播放时触发	windowIndex: Number
on-talk-start	开始对讲时触发	-
on-talk-end	结束对讲时触发	-
on-fullscreen	全屏状态改变时触发	isFullscreen: Boolean

Methods

方法名	说明	参数
play	开始播放	(url: String, windowIndex: Number)
stop	停止播放	(windowIndex: Number)
startTalk	开始对讲	-
stopTalk	停止对讲	-
setSplit	设置分屏数	(num: Number)