hzwl-easy-player/README.md

基于Vue 3的视频播放器组件，支持单屏和多屏播放模式

# Vue 3 + Vite

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

# hzwl-easy-player

一个基于Vue 3的简单视频播放器组件，支持单屏和多屏播放模式。

## 安装

```bash
npm install hzwl-easy-player
```

## EasyPlayer 文件配置

由于版权原因，EasyPlayer 相关文件需要单独配置：

1. 在你的项目的 `public` 目录下创建 `js/EasyPlayer` 文件夹：
```bash
mkdir -p public/js/EasyPlayer
```

2. 将 EasyPlayer 相关文件复制到该目录：
   - EasyPlayer-pro.js
   - decoder-pro.js
   - 其他相关文件

3. 确保你的项目配置（如 vite.config.js）正确处理了静态资源：
```js
export default defineConfig({
  // ... 其他配置
  publicDir: 'public',
})
```

## 使用方法

### 全局注册

```js
import { createApp } from 'vue'
import App from './App.vue'
import HzwlEasyPlayer from 'hzwl-easy-player'
import 'hzwl-easy-player/dist/style.css'

const app = createApp(App)
app.use(HzwlEasyPlayer)
app.mount('#app')
```

### 基础使用示例

```vue
<template>
  <div class="player-container">
    <HzwlPlayer 
      ref="player" 
      :videoUrl="url" 
      :playerId="playerId"
      :multiScreenOne="true"
      @player-click="handlePlayerClick"
    />
    <div class="controls">
      <button @click="handlePlay">播放</button>
      <button @click="handlePause">暂停</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 播放器实例引用
const player = ref(null)
const playerId = 'myPlayer'
const url = ref('https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8')

// 播放
const handlePlay = (index) => {
    player.value.onPlayer();
}

const handlePause = () => {
  if (player.value && player.value.onPause) {
    try {
      player.value.onPause();
    } catch (error) {
      console.error('暂停失败:', error);
    }
  } else {
    console.error('播放器未正确初始化');
  }
}

</script>

<style>
.player-container {
  width: 800px;
  height: 600px;
}

.controls {
  margin-top: 10px;
}
</style>
```

## 组件属性

| 属性 | 类型 | 默认值 | 说明 |
|------|------|-------|------|
| playerId | String | '' | 播放器容器ID，必填 |
| videoUrl | String | '' | 视频源URL，必填 |
| videoBuffer | Number | 0.2 | 缓存时长 |
| videoBufferDelay | Number | 1 | 缓存延迟 |
| showBandwidth | Boolean | true | 是否显示网速 |
| showPerformance | Boolean | false | 是否显示性能 |
| operateBtns | Object | {...} | 操作按钮配置 |
| watermarkText | String | '' | 水印文字 |
| hasAudio | Boolean | true | 是否启用音频 |
| isNotMute | Boolean | false | 是否为非静音模式 |
| multiScreenOne | Boolean | false | 是否启用单屏模式 |
| multiScreenTwo | Boolean | false | 是否启用双屏模式 |
| multiScreenFour | Boolean | false | 是否启用四屏模式 |
| multiScreenSix | Boolean | false | 是否启用六屏模式 |
| multiScreenNine | Boolean | false | 是否启用九屏模式 |
| multiScreenSixteen | Boolean | false | 是否启用十六屏模式 |

### operateBtns 对象配置
```js
{
  fullscreen: true,  // 全屏按钮
  screenshot: false, // 截图按钮
  play: true,        // 播放按钮
  audio: true,       // 音频按钮
  ptz: false,        // 云台控制
  quality: false,    // 画质选择
  performance: true  // 性能显示
}
```

## 事件

| 事件名 | 说明 | 返回值 |
|-------|------|-------|
| play | 开始播放时触发 | - |
| pause | 暂停播放时触发 | - |
| ended | 播放结束时触发 | - |
| timeupdate | 播放进度更新时触发 | 当前播放时间（秒） |
| loadedmetadata | 视频元数据加载完成时触发 | 视频总时长（秒） |
| player-click | 点击播放器时触发 | 播放器索引（单屏模式返回'one'，多屏模式返回数字索引） |

## 方法

可以通过ref获取组件实例，调用以下方法：

| 方法名 | 说明 | 参数 |
|-------|------|------|
| onPlayer | 播放当前选中的播放器 | - |
| onPause | 暂停当前选中的播放器 | - |
| onDestroy | 销毁所有播放器实例 | - |
| onMute | 设置当前选中的播放器静音 | - |
| setFullscreen | 设置当前选中的播放器全屏 | - |
| onReplay | 重新播放当前选中的播放器 | - |

## 多屏模式说明

组件支持六种播放器布局：
- 单屏模式 (multiScreenOne)
- 双屏模式 (multiScreenTwo)
- 四屏模式 (multiScreenFour)
- 六屏模式 (multiScreenSix)
- 九屏模式 (multiScreenNine)
- 十六屏模式 (multiScreenSixteen)

在多屏模式下：
1. 点击播放器可以选中对应的播放器
2. 选中的播放器会显示蓝色边框高亮效果
3. 所有播放器操作（播放、暂停、全屏等）都会作用于当前选中的播放器
4. 如果未选中任何播放器，操作会提示先选择播放器


### 使用示例

```vue
<template>
  <div class="player-container">
    <HzwlPlayer 
      ref="player" 
      :videoUrl="url" 
      :playerId="playerId"
      :multiScreenFour="true"
      @player-click="handlePlayerClick"
    />
    <div class="controls">
      <button @click="handlePlay">播放</button>
      <button @click="handlePause">暂停</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 播放器实例引用
const player = ref(null)
const playerId = 'myPlayer'
const url = ref('https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8')

// 播放
const handlePlay = (index) => {
    player.value.onPlayer();
}

const handlePause = () => {
  if (player.value && player.value.onPause) {
    try {
      player.value.onPause();
    } catch (error) {
      console.error('暂停失败:', error);
    }
  } else {
    console.error('播放器未正确初始化');
  }
}


</script>

<style>
.player-container {
  width: 800px;
  height: 600px;
}

.controls {
  margin-top: 10px;
}
</style>
```


## 开发

```bash
# 安装依赖
npm install

# 开发环境运行
npm run dev

```