Skip to content

hl-player-video 视频播放器组件

基于 H5 视频播放插件的 Vue 组件,支持多种视频格式播放,提供高性能的视频播放体验。

注意:播放器组件依赖 H5 插件,请提前下载并引入。

下载 h5player-js.zip 压缩包

安装

  1. h5player-js.zip 压缩包解压到项目的 public 目录下。

    H5Player 文件解压示例

  2. 在 HTML 文件的 <head> 标签中引入 h5player-js.min.js 文件。

javascript
<script src="./public/js/h5player.min.js"></script> // 依据项目路径按照实际情况引入 h5player-js.min.js

基础用法

属性

参数说明类型可选值默认值
url视频播放地址string''
mode播放模式number0 / 10

mode 说明

  • 0: 普通模式 - 适用于标准视频播放
  • 1: 高级模式 - 适用于高性能播放场景

回调事件

播放器支持以下回调事件:

窗口选择回调

javascript
windowEventSelect: function (index) {
  // 插件选中窗口回调
  console.log("选中的窗口索引:", index);
}

错误处理回调

javascript
pluginErrorHandler: function (index, iErrorCode, oError) {
  // 插件错误回调
  console.log("错误信息:", index, iErrorCode, oError);
}

首帧显示回调

javascript
firstFrameDisplay: function (index, iWidth, iHeight) {
  // 首帧显示回调
  console.log(`窗口${index}加载成功,分辨率:${iWidth}*${iHeight}`);
}

性能不足回调

javascript
performanceLack: function () {
  // 性能不够回调
  console.log("性能不足");
}

注意事项

  1. URL 验证: 组件会自动检查是否传递了有效的视频 URL,如果为空会显示错误提示
  2. 容器尺寸: 播放器会自动适应容器尺寸,建议为容器设置固定的宽高
  3. 浏览器兼容性: 需要浏览器支持 H5 视频播放功能

错误处理

当视频播放出现错误时,组件会通过 pluginErrorHandler 回调提供详细的错误信息,包括:

  • 错误窗口索引
  • 错误代码
  • 错误对象

建议在应用中实现相应的错误处理逻辑,提供用户友好的错误提示。