内容重构

更新记录

  • 1.1.7 (15527649518)：新增全屏按钮功能。

  • 1.1.6 (15527649518)：视频组件封装，修复了一处bug。

  • 1.1.5 (15527649518)：修复了一处bug，并添加了指定视频播放功能。

    平台兼容性

  • uni-app(4.03)：支持。

  • Vue2：支持。

  • Vue3：支持。

  • Chrome：支持。

  • Safari：支持。

  • app-vue：支持。

  • app-nvue：支持。

  • Android：支持。

  • iOS：支持。

  • 鸿蒙：支持。

  • 支付宝小程序：支持。

  • 抖音小程序：支持。

  • 百度小程序：支持。

  • 快手小程序：支持。

  • 京东小程序：支持。

  • 鸿蒙元服务：支持。

  • QQ小程序：支持。

  • 飞书小程序：支持。

  • 小红书小程序：支持。

  • 快应用-华为：支持。

  • 快应用-联盟：支持。

    特别说明

  • 推荐使用示例项目中的组件，直接下载导入插件可能会遇到压缩代码导致的问题。

  • H5、小程序分页请求数据最少需要达到5条，否则可能会出现一些小问题。

    说明

  • 本插件完全免费使用。

  • 支持H5、小程序、APP(nvue)版本，当前只支持Vue2版本，若需要Vue3源码版本，请购买。 在H5和小程序端，我们采用了3个item节点循环加载显示视频的方式。当到达第一个视频或最后一个视频时，系统会自动禁止循环滚动，从而避免因数据过多而导致的卡顿问题。 当网络连接断开时，系统将展示一个进度条加载动效，当网络恢复后，视频将自动开始播放。此外，该系统还支持自定义播放预览，用户可以指定某个视频进行预览播放。 为了方便使用，我们已经将此功能封装成了组件，用户只需简单调用即可实现功能。源码版本已提供，包括添加、删除视频、评论区功能、自定义全屏样式以及自定义全屏等高级功能。如需获取核心源代码，可联系我。 关于联系方式，线上可通过点击上方进入交流群联系我，线下则可通过QQ：***或微信：thrmmkk123联系我。 快速上手指南：

  1. 在H5和小程序中，通过引入twVideov和twVideon两个组件来实现视频播放功能。
  2. 初始化视频列表，并设置初始播放下标为0。
  3. 调用refreshSquare方法重新加载视频列表。
  4. 调用lodingData方法加载视频数据。
  5. 在onShow和onHide方法中分别处理视频播放和暂停逻辑。
  6. 配置属性loadOpen，默认值为true。
tabBarShow: 0, // 系统tabBar栏
tabBarHeight: 50, // 自定义底部栏的高度（在tabBarShow为1情况下生效）
speedBottom: 0, // 进度条离底部的距离（px）
autoplay: true, // 初始加载完成是否自动播放
loopPlay: true, // 当前视频是否循环播放
nextPlay: false, // 是否开启自动播放下一条（H5不支持，由于浏览器不支持视频自动播放，H5自动播放到下一条会黑屏）
totalvod: 0, // 视频总数量，有值才能滑动加载到最后一个视频并禁止循环滑动（仅H5、小程序支持）
doubleOpen: true, // 是否开启双击点赞
doubleHeart: true, // 双击点赞屏幕是否显示桃心
swId: '', // 页面多个tab视频时需传入不同的类型
showBarHeight: true, // 是否有显示statusBarHeight状态栏适配
event: {
@refreshData: EventHandle, // 下拉刷新加载回调
@lodData: EventHandle, // 到底加载回调
@doubleClick: EventHandle, // 双击回调，event当前双击的视频对象数据
@longpress: EventHandle, // 长按回调，event当前长按的视频对象数据
@swiperChange: EventHandle, // 切换回调，event滑动切换到当前的视频对象数据
}