ht-h5player

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)

浏览器支持

• Chrome >= 56
• Firefox >= 52
• Safari >= 11
• Edge >= 79

注意事项

1. 确保服务器支持 WebSocket 连接
2. 播放器依赖 h5player.min.js，请确保文件在 basePath 指定的路径下
3. 移动端限制最大分屏数为 2x2
4. MSE 模式需要浏览器支持 MediaSource Extensions

常见问题

Q: 播放器无法播放视频

A: 请检查：

1. WebSocket URL 是否正确
2. 网络连接是否正常
3. 浏览器是否支持当前播放模式

Q: 对讲功能无法使用

A: 请确保：

1. 浏览器已授权麦克风权限
2. 对讲服务器地址配置正确

更新日志

1.0.0

• 🎉 首次发布
• ✨ 支持多分屏显示
• 🔊 支持语音对讲
• 📺 支持实时预览和回放

License

MIT