更新记录

1.0.0（2026-10-20）

上线

平台兼容性

uni-app(4.56)

wt-swipervideo（图片 + 视频混合轮播组件）

支持 uni-app 图片 / 视频混合轮播、自动播放、加载占位、自动高度适配的通用轮播组件。
视频播放器基于 renderjs 实现，适用于 H5 / App（vue）；小程序端图片轮播可用，但 renderjs 视频播放器暂不支持。

✨ 功能特性

• ✅ 图片与视频混合轮播（自动识别 is_video / type / video_url）
• ✅ 视频自动播放（默认静音，绕过 iOS 自动播放限制）、可循环
• ✅ 内置自定义播放器：进度条、控制栏、静音切换、中央播放按钮、时间显示
• ✅ 播放结束自动暂停（默认行为）
• ✅ 轮播高度随内容自动适配（图片加载完成后重新测量）
• ✅ 角标页码指示（当前页 / 总页数）
• ✅ 图片点击预览（uni.previewImage）
• ✅ 视频加载占位图（可配置 loadingImg）
• ✅ 全局视频播放控制（通过 uni.$emit('VideoCmd', ...)）
• ✅ 适用于商品详情、短视频、广告轮播、内容展示

📦 目录结构

wt-swipervideo/
├── wt-swipervideo.vue   # 主组件（easycom 入口，文件名 = 目录名）
├── uni-rich-video.vue   # 视频播放器（renderjs，作为内部依赖随附）
├── package.json         # uni_modules 发布清单
├── readme.md
└── changelog.md

📥 安装方式

方式一：插件市场导入（推荐）

1. 打开 DCloud 插件市场
2. 搜索 wt-swipervideo
3. 点击「使用 HBuilderX 导入插件」
4. 选择你的 uni-app 项目

方式二：手动安装

将 wt-swipervideo 文件夹复制到项目的 uni_modules/ 或 components/ 目录下即可。

组件已符合 easycom 组件规范（components/组件名称/组件名称.vue），放入上述目录后无需 import、无需注册，直接在页面 <template> 中使用 <wt-swipervideo> 即可。

🚀 基础用法

<template>
  <view>
    <wt-swipervideo :banre-data="wheel" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      wheel: [
        { img_url: 'https://example.com/video.mp4', is_video: true },  //视频is_video必须true,
        { img_url: 'https://example.com/image1.jpg', is_video: false },
        { img_url: 'https://example.com/image2.jpg' , is_video: false}
      ]
    }
  }
}
</script>

视频项：用 img_url 填写视频地址，并加 is_video: true 标记。
图片项：用 img_url 填写图片地址即可 is_video: false 标记。

📌 Props

banreData 子项字段说明

✅ 视频类型识别优先级：is_video > type > video_url（仅用于判断该项是不是视频）。

🎮 全局视频控制

组件通过 uni.$emit 发送指令，控制当前可见视频的播放 / 暂停：

// 播放当前视频
uni.$emit('VideoCmd', { action: 'play' })

// 暂停当前视频
uni.$emit('VideoCmd', { action: 'pause' })

说明：内置视频播放器（uni-rich-video.vue）本身还提供 play / pause / seek / seekAndPlay / replay 等方法，可用于更精细的逐视频控制；如需在页面中直接调用，可基于 VideoCmd 机制扩展，或给主组件增加对应透传方法。

⚠️ 注意事项

• 组件已符合 easycom 规范，放在 components/ 或 uni_modules/ 下即可直接使用，无需 import / 注册。
• 视频播放器基于 renderjs，仅支持 H5 / App（vue）；小程序端视频可能无法播放。
• 视频地址统一使用 img_url 字段；如需自定义内置播放器（循环、控制栏、主题色等），可扩展 uni-rich-video.vue 或为其增加透传 prop。
• 切换轮播页时，组件内部通过 uni.$emit('VideoCmd', ...) 自动暂停非当前视频、播放当前视频，一般无需手动干预。