更新记录

1.0.0（2026-06-14） 下载此版本

jz-video-flow 更新日志

v1.0.0 (2026-06-14)

新特性

• 初始版本发布
  • 抖音风格短视频滑动组件
  • 支持上下滑动切换视频
  • 三槽位渲染机制（prev/current/next）
  • HLS 流媒体支持（H5 平台集成 hls.js）
  • 进度条控制（拖拽跳转、缓冲进度显示）
  • 交互事件（单击、双击、长按、触顶下拉刷新）
  • 自动连播（播放完毕自动切换下一条）
  • 多端兼容（H5/微信小程序/支付宝小程序/App-Vue/App-Nvue）

组件

• jz-video-flow.vue — H5 / 小程序 主组件
• jz-video-flow.nvue — App-Nvue 主组件
• jz-video-player.vue — H5 / 小程序 视频播放器
• jz-video-player.nvue — App-Nvue 视频播放器
• jz-progress-bar.vue — H5 / 小程序 进度条
• jz-progress-bar.nvue — App-Nvue 进度条

核心模块

• video-pool.js — 三槽位视频池调度器
• swiper-controller.js — 滑动状态机
• utils.js — 工具函数（throttle、formatTime、clamp 等）

暴露方法

• play() — 播放当前视频
• pause() — 暂停当前视频
• seek(time) — 跳转到指定时间
• setCurrent(index) — 切换到指定索引
• switchEpisode(list, index) — 切换剧集
• setPlaybackRate(rate) — 设置播放速率
• pageShow() / pageHide() — 页面生命周期控制

事件

• change / loadmore / refresh — 切换与加载事件
• click / dblclick / longTap — 交互事件
• play / pause / ended / waiting / error — 播放事件
• timeupdate / loadedmetadata — 进度事件
• fullscreenchange / changing / changeed — 控制事件

Props

• list / current / width / height — 基础配置
• duration / criticalVal / distance / auto — 切换行为配置
• muted / objectFit / progress / showFullScreen — 播放配置
• showLoading / errorMessage / upperTipMessage — UI 配置

插槽

• default — 视频覆盖层（视频信息、交互按钮等）
• video — 自定义视频播放器
• progressBar — 自定义进度条

  jz-video-flow 更新日志

v1.0.0 (2026-06-14)

新特性

• 初始版本发布
  • 抖音风格短视频滑动组件
  • 支持上下滑动切换视频
  • 三槽位渲染机制（prev/current/next）
  • HLS 流媒体支持（H5 平台集成 hls.js）
  • 进度条控制（拖拽跳转、缓冲进度显示）
  • 交互事件（单击、双击、长按、触顶下拉刷新）
  • 自动连播（播放完毕自动切换下一条）
  • 多端兼容（H5/微信小程序/支付宝小程序/App-Vue/App-Nvue）

组件

• jz-video-flow.vue — H5 / 小程序 主组件
• jz-video-flow.nvue — App-Nvue 主组件
• jz-video-player.vue — H5 / 小程序 视频播放器
• jz-video-player.nvue — App-Nvue 视频播放器
• jz-progress-bar.vue — H5 / 小程序 进度条
• jz-progress-bar.nvue — App-Nvue 进度条

核心模块

• video-pool.js — 三槽位视频池调度器
• swiper-controller.js — 滑动状态机
• utils.js — 工具函数（throttle、formatTime、clamp 等）

暴露方法

• play() — 播放当前视频
• pause() — 暂停当前视频
• seek(time) — 跳转到指定时间
• setCurrent(index) — 切换到指定索引
• switchEpisode(list, index) — 切换剧集
• setPlaybackRate(rate) — 设置播放速率
• pageShow() / pageHide() — 页面生命周期控制

事件

• change / loadmore / refresh — 切换与加载事件
• click / dblclick / longTap — 交互事件
• play / pause / ended / waiting / error — 播放事件
• timeupdate / loadedmetadata — 进度事件
• fullscreenchange / changing / changeed — 控制事件

Props

• list / current / width / height — 基础配置
• duration / criticalVal / distance / auto — 切换行为配置
• muted / objectFit / progress / showFullScreen — 播放配置
• showLoading / errorMessage / upperTipMessage — UI 配置

插槽

• default — 视频覆盖层（视频信息、交互按钮等）
• video — 自定义视频播放器
• progressBar — 自定义进度条

平台兼容性

uni-app(4.45)

jz-video-flow

抖音风格短视频滑动组件，支持上下滑动切换、三槽位渲染、HLS流媒体、进度条控制、自动连播、多端兼容

核心特性

快速开始

1. 安装

将 jz-video-flow 目录置于项目的 src/uni_modules/ 下。

2. 组件注册

全局注册（推荐）：

// main.js / App.vue
import JzVideoFlow from '@/uni_modules/jz-video-flow'

// Vue 3
app.component('JzVideoFlow', JzVideoFlow)

页面内注册：

<script setup>
import JzVideoFlow from '@/uni_modules/jz-video-flow'
</script>

3. 基础用法

<template>
  <JzVideoFlow
    ref="videoFlowRef"
    :list="videoList"
    :current="currentIndex"
    :width="windowWidth"
    :height="windowHeight"
    :muted="false"
    :auto="true"
    :progress="true"
    :upper-tip-message="下拉刷新"
    @change="onVideoChange"
    @loadmore="onLoadMore"
    @refresh="onRefresh"
    @click="onVideoClick"
    @dblclick=""
    @timeupdate=""
  >
    <!-- 默认插槽：覆盖层（视频信息、点赞按钮等） -->
    <template #default="{ video, index }">
      <view class="video-overlay">
        <text class="video-title">{{ video.title }}</text>
      </view>
    </template>
  </JzVideoFlow>
</template>

<script setup>
import { ref } from 'vue'

const videoList = ref([
  { src: 'https://example.com/video1.mp4', poster: '', title: '视频1' },
  { src: 'https://example.com/video2.m3u8', poster: '', title: '视频2' },
])
const currentIndex = ref(0)

function onVideoChange(ev) {
  currentIndex.value = ev.detail.current
}
function onLoadMore(ev) {
  // 加载更多视频
}
function onRefresh(ev) {
  // 刷新视频列表
}
</script>

Props

Events

Slots

方法（通过 ref 调用）

目录结构

src/uni_modules/jz-video-flow/
├── package.json                    # 插件配置
├── readme.md                       # 说明文档
├── changelog.md                    # 更新日志
├── index.js                        # 主入口
├── components/                     # 组件目录
│   ├── jz-video-flow.vue           # H5 / 小程序 主组件
│   ├── jz-video-flow.nvue          # App-Nvue 主组件
│   ├── jz-video-player.vue         # 视频播放器（H5/小程序）
│   ├── jz-video-player.nvue        # 视频播放器（Nvue）
│   ├── jz-progress-bar.vue         # 进度条（H5/小程序）
│   └── jz-progress-bar.nvue        # 进度条（Nvue）
└── core/                           # 核心模块
    ├── video-pool.js               # 三槽位调度器
    ├── swiper-controller.js        # 滑动状态机
    └── utils.js                    # 工具函数

注意事项

HLS 支持

• H5 平台自动集成 hls.js，支持 m3u8 格式
• 小程序原生支持 HLS（微信/支付宝等）
• App-Nvue 需确保视频格式兼容

自动播放限制

• H5 平台受浏览器自动播放政策限制，首次需静音或用户交互
• 建议初始设置 muted: true，用户点击后取消静音

nvue 特殊处理

• nvue 使用 weex.requireModule('animation') 实现切换动画
• nvue 不支持 transition CSS 属性，需用 animation 模块
• nvue 进度条事件需阻止冒泡（@touchstart.stop）

许可证

MIT License

相关文档

• docs/jz-video-flow-plugin-dev.md — 插件开发文档