WwVideoPlayer 视频播放器组件

一个基于 Vue 3 的视频播放器组件，支持 H.264/H.265 视频播放、云台控制和实时流播放。

安装

npm install ww-video-player

基础用法

<template>
  <WwVideoPlayer
    ref="videoPlayerRef"
    :options="options"
    :is-live="true"
    :debug="false"
    :show-p-t-z="true"
    :show-controller="true"
    @stop-video="onStopVideo"
    @quality-change="onQualityChange"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { WwVideoPlayer } from 'ww-video-player'
import type { VideoQuality } from 'ww-video-player'

const videoPlayerRef = ref<InstanceType<typeof WwVideoPlayer> | null>(null)

const options = {
  debug: false,
  mode: 'video',
  baseLibPath: '/js/h265/',
}

// 播放视频
const play = async () => {
  await videoPlayerRef.value?.openVideo({
    url: 'ws://example.com/video',
    token: 'optional-token'
  })
}

// 关闭视频
const close = async () => {
  await videoPlayerRef.value?.closeVideo()
}
</script>

Props 属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | debug | boolean | false | 是否开启调试模式 | | isLive | boolean | true | 是否为直播模式 | | options | PlayerOptions | 见下方 | 播放器配置选项 | | showPTZ | boolean | false | 是否显示云台控制 | | showController | boolean | false | 是否显示播放控制器 |

PlayerOptions 配置

interface PlayerOptions {
  debug: boolean        // 是否调试模式
  mode: 'video' | 'audio'  // 播放模式
  baseLibPath: string   // 解码器库文件路径
  decoderLogLevel?: number  // 解码器日志级别
}

默认值：

{
  debug: false,
  mode: 'video',
  baseLibPath: '/lib/',
  decoderLogLevel: 0
}

Events 事件

| 事件名 | 参数 | 说明 | |--------|------|------| | stop-video | - | 视频停止时触发 | | quality-change | quality: VideoQuality | 清晰度变化时触发 | | change-play-speed | speed: number | 播放速度变化时触发 | | control-talk | status: boolean | 对讲状态变化时触发 | | lock-ptz | status: boolean | 云台锁定状态变化时触发 | | do-zoom | command: PTZZoomCommand | 云台变倍指令触发 | | move-to-direction | direction: PTZDirection | 云台方向移动指令触发 | | error | error: Error, detail?, info? | 发生错误时触发 | | video-status-change | status: number | 视频状态变化时触发 | | sei-info | objects: unknown[] | SEI 信息触发 |

Expose 方法

通过 ref 调用组件暴露的方法：

| 方法名 | 参数 | 返回值 | 说明 | |--------|------|--------|------| | openVideo | video: { url: string; token?: string } | Promise<void> | 打开并播放视频 | | closeVideo | - | Promise<void> | 关闭视频 | | captureVideo | - | void | 截图当前画面 | | changeQuality | quality: VideoQuality | void | 切换清晰度 |

方法示例

// 打开视频
await videoPlayerRef.value?.openVideo({
  url: 'ws://example.com/stream',
  token: 'your-token'  // 可选
})

// 关闭视频
await videoPlayerRef.value?.closeVideo()

// 截图
videoPlayerRef.value?.captureVideo()

// 切换清晰度 (0: 高清, 1: 标清, 2: 流畅)
videoPlayerRef.value?.changeQuality(1)

Types 类型定义

VideoQuality 视频清晰度

type VideoQuality = 0 | 1 | 2
// 0: 高清
// 1: 标清
// 2: 流畅

PTZDirection 云台方向

type PTZDirection =
  | 'tilt_up'     // 上
  | 'up_right'    // 右上
  | 'pan_right'   // 右
  | 'down_right'  // 右下
  | 'tilt_down'   // 下
  | 'down_left'   // 左下
  | 'pan_left'    // 左
  | 'up_left'     // 左上

PTZZoomCommand 云台变倍指令

type PTZZoomCommand =
  | 'zoom_in'    // 放大
  | 'zoom_out'   // 缩小
  | 'focus_in'   // 聚焦近
  | 'focus_out'  // 聚焦远
  | 'iris_up'    // 光圈增大
  | 'iris_down'  // 光圈减小

VideoStatus 视频状态

const VideoStatus = {
  vConnect: 0,  // 开始连接
  vStart: 1,    // 开始播放
  vPlay: 2,     // 正在播放
  vPause: 3,    // 暂停
  vStop: 4      // 停止
}

完整示例

<template>
  <div class="app-container">
    <button @click="openVideo">播放</button>
    <button @click="changeQuality(0)">高清</button>
    <button @click="changeQuality(1)">标清</button>
    <button @click="changeQuality(2)">流畅</button>
    
    <div class="player-wrapper">
      <WwVideoPlayer
        ref="videoPlayerRef"
        :options="options"
        :is-live="true"
        :show-p-t-z="true"
        :show-controller="true"
        @stop-video="onStopVideo"
        @quality-change="onQualityChange"
        @move-to-direction="onMoveToDirection"
        @do-zoom="onDoZoom"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { WwVideoPlayer } from 'ww-video-player'
import type { VideoQuality, PTZDirection, PTZZoomCommand } from 'ww-video-player'

interface VideoPlayerExpose {
  openVideo: (video: { url: string; token?: string }) => Promise<void>
  closeVideo: () => Promise<void>
  captureVideo: () => void
  changeQuality: (quality: VideoQuality) => void
}

const videoPlayerRef = ref<VideoPlayerExpose | null>(null)

const options = {
  debug: false,
  mode: 'video' as const,
  baseLibPath: '/js/h265/',
}

// 播放视频
const openVideo = async () => {
  await videoPlayerRef.value?.openVideo({
    url: 'ws://example.com/stream'
  })
}

// 切换清晰度
const changeQuality = (quality: VideoQuality) => {
  videoPlayerRef.value?.changeQuality(quality)
}

// 事件处理
const onStopVideo = () => console.log('视频已停止')
const onQualityChange = (q: VideoQuality) => console.log('清晰度:', q)
const onMoveToDirection = (d: PTZDirection) => console.log('云台方向:', d)
const onDoZoom = (c: PTZZoomCommand) => console.log('变倍:', c)
</script>

<style>
.player-wrapper {
  width: 600px;
  height: 400px;
}
</style>