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