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 to learn more.

Learn more about IDE Support for Vue in the Vue Docs Scaling up Guide.

hzwl-easy-player

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

安装

npm install hzwl-easy-player

EasyPlayer 文件配置

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

1. 在你的项目的 public 目录下创建 js/EasyPlayer 文件夹：

mkdir -p public/js/EasyPlayer

2. 将 EasyPlayer 相关文件复制到该目录：

   • EasyPlayer-pro.js
   • decoder-pro.js
   • 其他相关文件

3. 确保你的项目配置（如 vite.config.js）正确处理了静态资源：

export default defineConfig({
  // ... 其他配置
  publicDir: 'public',
})

使用方法

全局注册

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')

基础使用示例

<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 对象配置

{
  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. 如果未选中任何播放器，操作会提示先选择播放器

使用示例

<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>

开发

# 安装依赖
npm install

# 开发环境运行
npm run dev