更新记录

1.0.2（2025-11-07）

1.0.2 (2025-11-07)

新增功能

• 视频播放器组件（播放/暂停、进度条、快进/快退、全屏）
• 媒体画廊组件（分类展示、视频列表、分页、二维码分享）
• 完整的 TypeScript 类型支持
• 响应式设计，支持 PC/平板/手机

技术特性

• Vue 3 Composition API
• 无第三方依赖
• 支持 H5、App、小程序平台

使用说明

详见插件文档和示例代码

平台兼容性

其他

沉浸式音视频播放器 Zen Player

一款功能强大、界面精美的沉浸式音视频播放器插件，支持 Vue 3 项目

插件特色

✅ 自定义视频播放器 - 支持播放/暂停、进度条拖拽、快进/快退
✅ 全屏播放支持 - 完美兼容 iOS/Android 全屏模式
✅ 视频分类展示 - 支持多分类视频管理和切换
✅ 媒体画廊组件 - 精美的视频列表展示，支持分页
✅ 响应式设计 - 完美适配 PC/平板/手机等各种设备
✅ TypeScript 支持 - 完整的类型定义
✅ 二维码分享 - 支持生成分享二维码
✅ 自定义图标 - 可自定义播放器所有图标

平台兼容性

安装方式

方式一：通过 DCloud 插件市场导入

1. 访问 DCloud 插件市场
2. 在 HBuilderX 中右键项目 → 导入插件 → 从插件市场导入
3. 搜索"zen-player"并导入

方式二：通过 npm 安装

npm install zen-player

方式三：手动导入

1. 下载插件
2. 将 zen-player 文件夹复制到项目的 uni_modules 目录下

快速开始

基础用法

在 Vue 3 项目中使用：

<template>
  <div class="container">
    <!-- 视频播放器 -->
    <ImmersiveVideoPlayer
      :video-src="videoSrc"
      :video-title="videoTitle"
      :poster="poster"
      @play="handlePlay"
      @pause="handlePause"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VideoPlayer as ImmersiveVideoPlayer } from '@/uni_modules/zen-player/src/index.js'

const videoSrc = ref('https://example.com/video.mp4')
const videoTitle = ref('示例视频')
const poster = ref('https://example.com/poster.jpg')

const handlePlay = () => {
  console.log('视频开始播放')
}

const handlePause = () => {
  console.log('视频暂停')
}
</script>

媒体画廊用法

<template>
  <div class="gallery-container">
    <ImmersiveMediaGallery
      :categories="categories"
      :videos="videos"
      header-title="视频库"
      header-subtitle="Video Gallery"
      @video-select="handleVideoSelect"
    />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { MediaGallery as ImmersiveMediaGallery } from '@/uni_modules/zen-player/src/index.js'

const categories = reactive([
  {
    id: 1,
    name: '精选视频',
    nameEn: 'Featured',
    image: 'https://example.com/category1.jpg',
    description: '精选优质视频内容'
  }
])

const videos = reactive([
  {
    id: 1,
    title: '示例视频',
    titleEn: 'Sample Video',
    cover: 'https://example.com/cover1.jpg',
    src: 'https://example.com/video1.mp4',
    category: '精选视频',
    categoryEn: 'Featured'
  }
])

const handleVideoSelect = (video) => {
  console.log('选中视频:', video)
}
</script>

API 文档

VideoPlayer 组件

Props

Events

Methods

MediaGallery 组件

Props

Events

数据格式说明

Category 分类对象

{
  id: 1,                    // 分类ID
  name: '精选视频',          // 分类名称（中文）
  nameEn: 'Featured',       // 分类名称（英文）
  image: 'xxx.jpg',         // 分类封面图
  description: '描述文字'    // 分类描述
}

Video 视频对象

{
  id: 1,                    // 视频ID
  title: '示例视频',         // 视频标题（中文）
  titleEn: 'Sample',        // 视频标题（英文）
  cover: 'xxx.jpg',         // 视频封面
  src: 'xxx.mp4',          // 视频地址
  category: '精选视频',      // 所属分类（中文）
  categoryEn: 'Featured'    // 所属分类（英文）
}

常见问题

1. 视频无法播放？

• 检查视频地址是否正确
• 确认视频格式是否支持（推荐 MP4 格式）
• 检查网络连接是否正常

2. 全屏功能不生效？

• iOS 需要在 video 标签上添加 webkit-playsinline 属性
• Android 需要检查是否有屏幕旋转权限

3. 如何自定义样式？

• 组件支持通过 CSS 变量自定义样式
• 可以通过 scoped 样式覆盖默认样式

更新日志

1.0.2 (2025-11-07)

• 优化插件目录结构
• 更新文档格式符合 DCloud 规范
• 添加更多使用示例

1.0.1 (2025-11-06)

• 修复已知问题
• 优化性能

1.0.0 (2025-11-05)

• 首次发布
• 支持基础视频播放功能
• 支持媒体画廊展示

技术支持

• GitHub: https://github.com/silence3838438/zen-player
• 问题反馈: https://github.com/silence3838438/zen-player/issues

开源协议

本插件遵循 MIT 协议开源