更新记录

1.0.0（2025-09-15）

## [1.0.0] - 2025-09-15
### Added
-   初次发布。
-   实现视频基本播放控制（播放/暂停/跳转/静音）。
-   实现全屏切换功能（多端适配）。
-   自定义控制栏UI（顶部标题、底部进度条、中央按钮）。
-   手势控制支持（进度、音量、亮度 - 基础框架）。
-   封面图、加载动画、重播按钮。
-   丰富的事件回调和方法调用。

平台兼容性

uni-app(3.6.9)

uni-app x(3.6.9)

其他

hy-video-player-plus 增强型视频播放器

一个功能丰富、UI可定制、多端兼容的uni-app视频播放器组件。

特性

• 🎬 核心播放功能: 支持播放、暂停、进度控制、音量控制、全屏切换。
• 🎨 自定义UI: 高度可定制的控制栏、按钮、进度条样式。
• 👆 手势操作: 支持滑动控制进度、音量、亮度（平台支持情况下）。
• 🌐 多端兼容: 适配App、H5、各大小程序平台。
• 📱 全屏适配: 处理不同端的全屏API差异。
• 🔒 无权限依赖: 纯前端UI组件，不涉及任何敏感权限。

安装

通过HBuilderX的uni_modules导入本插件，或手动将本插件放入你项目的uni_modules目录下。

使用方法

基本使用

<template>
  <view>
    <hy-video-player-plus src="https://example.com/video.mp4" poster="https://example.com/poster.jpg" title="示例视频"
      :autoplay="false" :loop="false" :muted="false" @play="onPlay" @pause="onPause" @ended="" @error="onError">
    </hy-video-player-plus>
  </view>
</template>

<script>
export default {
  methods: {
    onPlay(e) {
      console.log('视频开始播放', e);
    },
    onPause(e) {
      console.log('视频暂停', e);
    },
    (e) {
      console.log('视频播放结束', e);
    },
    onError(e) {
      console.error('视频播放错误', e);
    }
  }
};
</script>

配置属性 (Props)

属性                       类型   默认值          说明
src                     String    -           (必填) 视频资源地址，支持本地路径和网络URL
poster                  String    ''          视频封面图地址
title                   String    ''          视频标题，显示在顶部控制栏
autoplay                Boolean   false       是否自动播放
loop                    Boolean   false       是否循环播放
muted                   Boolean   false       是否静音播放
initial-time            Number    0           指定视频初始播放位置，单位秒
hide-controls           Boolean   false       是否隐藏自带控制栏
show-cover              Boolean   true        是否显示视频封面
show-center-play-btn    Boolean   true        是否显示中央播放按钮
width                   String    '100%'      播放器宽度
height                  String    '225px'     播放器高度 (非全屏状态下)
...         其他自定义图标属性请参考文档

事件 (Events)

事件名             说明                   回调参数
@play               开始播放时触发     原生事件对象
@pause              暂停播放时触发     原生事件对象
@timeupdate         播放进度变化时触发   原生事件对象
@ended              播放结束时触发     原生事件对象
@error              播放发生错误时触发   原生事件对象
@waiting            视频开始缓冲时触发   原生事件对象
@progress           加载进度变化时触发   原生事件对象
@fullscreenchange   全屏状态变化时触发   { fullScreen: Boolean }
@mutechange         静音状态变化时触发   { isMuted: Boolean }

方法 (Methods)

通过 ref 调用组件方法。

方法名             说明                  参数
play                播放视频                -
pause               暂停视频                -
seek                跳转到指定位置     position (Number) 单位秒
stop                停止播放并重置到开始  -
replay              重新播放                -
requestFullScreen   进入全屏                -
exitFullScreen      退出全屏                -
toggleFullScreen    切换全屏状态          -
toggleMute          切换静音状态          -

注意事项

自动播放策略: 不同平台对自动播放(autoplay)策略限制不同，尤其iOS和部分浏览器，通常需要用户交互（如点击）后才能触发播放。

全屏实现: 全屏API在H5、小程序和App端实现方式不同，本组件已做兼容处理，但可能仍有平台特异性行为。

手势控制: 音量、亮度手势调整在某些平台（如H5）可能受限。

视频格式: 确保视频格式在不同目标平台的支持性。