ht-player-vue2

一个基于Vue2的视频监控播放器组件，支持实时预览、回放、对讲、分屏、录制、截图等功能。

✨ 主要特性

• 适配Vue2.x全版本
• 支持多分屏显示（1x1~4x4）
• 支持实时预览、回放、对讲、录制、截图
• 支持音量调节、静音、全屏
• 支持移动端自适应
• 高性能WebAssembly解码
• API简单，易于集成

📦 安装

npm install ht-player-vue2

🚀 快速上手

1. 全局注册

import Vue from 'vue'
import HtPlayer from 'ht-player-vue2'
import 'ht-player-vue2/dist/ht-player-demo.css'

Vue.use(HtPlayer)

2. 局部注册

import HtPlayer from 'ht-player-vue2'
import 'ht-player-vue2/dist/ht-player-demo.css'

export default {
  components: { HtPlayer }
}

3. 组件使用示例

<template>
  <ht-player
    ref="player"
    :urls="playerUrls"
    :width="800"
    :height="600"
    :showControls="true"
    :autoplay="false"
    :iMaxSplit="4"
    :splitNum="2"
    :on-init="onPlayerInit"
    :on-ready="onPlayerReady"
    :on-error="onPlayerError"
  />
</template>

<script>
export default {
  data() {
    return {
      playerUrls: {
        realplay: 'ws://your-stream-url',  // 实时预览流地址
        talk: '',      // 对讲流地址
        playback: ''   // 回放流地址
      }
    }
  },
  methods: {
    onPlayerInit(player) {
      console.log('播放器初始化完成', player)
    },
    onPlayerReady(player) {
      console.log('播放器准备就绪', player)
    },
    onPlayerError(error) {
      console.error('播放器错误', error)
    },
    // 直接调用播放器方法
    startPlay() {
      this.$refs.player.realplay()
    },
    stopPlay() {
      this.$refs.player.stopPlay()
    }
  }
}
</script>

⚙️ 组件属性 Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | urls | Object | {} | 播放地址配置（realplay, talk, playback） | | showControls | Boolean | true | 是否显示控制面板 | | autoplay | Boolean | false | 是否自动播放 | | width | Number | 400 | 播放器宽度 | | height | Number | 300 | 播放器高度 | | iMaxSplit | Number | 4 | 最大分屏数 | | splitNum | Number | 2 | 当前分屏数 | | onInit | Function | null | 初始化回调 | | onReady | Function | null | 准备就绪回调 | | onError | Function | null | 错误回调 | | onLoad | Function | null | 加载回调 | | onDestroy | Function | null | 销毁回调 |

urls 配置示例

{
  realplay: 'ws://192.168.1.100:8080/stream',  // 实时预览流地址
  talk: 'ws://192.168.1.100:8080/talk',        // 对讲流地址
  playback: 'ws://192.168.1.100:8080/playback' // 回放流地址
}

🛠️ 组件方法 Methods

| 方法名 | 说明 | 参数 | |--------|------|------| | realplay() | 开始实时预览 | - | | stopPlay() | 停止播放 | - | | stopAllPlay() | 停止所有窗口播放 | - | | talkStart() | 开始对讲 | - | | talkStop() | 停止对讲 | - | | playbackStart() | 开始回放 | - | | playbackPause() | 暂停回放 | - | | playbackResume() | 恢复回放 | - | | openSound() | 开启声音 | - | | closeSound() | 关闭声音 | - | | setVolume(value) | 设置音量 | value: 0-100 | | capture() | 截图 | - | | recordStart(type) | 开始录制 | type: 'MP4' | 'PS' | | recordStop() | 停止录制 | - | | arrangeWindow() | 重新排列窗口 | - | | wholeFullScreen() | 整体全屏 | - |

🏗️ 构建与开发

# 安装依赖
npm install
# 构建组件库
npm run build
# 运行示例项目
cd example
npm install
npm run dev

⚠️ 注意事项

1. 仅适配Vue2，不支持Vue3。
2. 需确保播放器JS库文件已正确加载。
3. WebSocket流需后端支持。
4. 某些功能需HTTPS环境。
5. 建议在现代浏览器环境下使用。

📝 版本说明

• v1.0.0：Vue2首发版本
• v2.x.x：Vue3版本（请使用原ht-player-demo包）

📄 License

MIT