uniapp - 仿抖音短视频项目
仿抖音短视频阅读手册
特殊通知
1.请用户认真阅读以下说明，千万不能混淆页面随意引入，如果你发现运行后页面样式排版错乱，大概率是引入错误喔。
2.请App端用户将HbuilderX版本调整到3.3.9版本或3.3.9以下的版本，以规避list-cell渲染问题。
需求说明
在项目中内置短视频模块
功能说明
1.APP端
- 滑动视频播放
- 视频播放与暂停
- 滑动进度条
- 预加载视频
- 自适应视频封面
- 滑动视频小窗预览
- 无限加载视频
- 普通点赞/取消点赞
- 双击屏幕点赞
- 视频结束自动切换下一个视频
- 视频预览列表
- 请求加载视频列表
- 点击某视频播放某视频
- 视频列表内
- 滑动视频播放
- 视频播放与暂停
- 预加载视频
- 自适应视频封面
- 无限加载视频
- 普通点赞/取消点赞
- 侧滑返回
- 评论
- 评论列表
- 一级评论「含表情+GIF动图」
- 二级评论「含表情+GIF动图」
- 根据视频作者显示「作者」标志
- 展开查看回复的评论
- 根据是否是此视频作者显示二级评论「作者」标志
- 根据是否是此视频作者显示「删除」按钮
- 倒序显示评论
- 点赞/取消点赞
- [ ] 评论算法
- 评论输入框
- 触摸弹起
- 点击表情展开默认emoji表情「QQ」
- 记住历史输入emoji表情「QQ」
- 上传自定义图片表情
- 点击GIF表情显示在评论框之下
- 记住历史GIF表情
- GIF表情
- 分页显示GIF表情
- 搜索GIF表情
- 点击GIF表情显示在评论框之下
- 点击搜索GIF弹起表情输入框
- 输入GIF值显示GIF表情，点击表情显示在评论框之下
- 评论列表
2.微信小程序、H5端
- 滑动视频播放
- 视频播放与暂停
- 预加载视频
- 自适应视频封面
- 无限加载视频
- 普通点赞/取消点赞
- 双击屏幕点赞
- 视频结束自动切换下一个视频
- 视频预览列表
- 请求加载视频列表
- 点击某视频播放某视频
- 视频列表内
- 滑动视频播放
- 视频播放与暂停
- 预加载视频
- 自适应视频封面
- 无限加载视频
- 普通点赞/取消点赞
- 侧滑返回
注意说明
1.APP端
| App端 |
|---|
| index.nvue页面适用于：安卓、iOS |
| 导入含 tabbar 页面，请在 onLoad()中修改 deleteHeigth的值。否则无法滑动 |
| demo页面都为 nvue 页面，请误引入至 vue 页面中 |
| App端请勾选VideoPlayer模块。否则视频无法播放 |
| 若出现每一个视频封面黑屏，请修改:poster="item.src+‘?x-oss-process=video/snapshot,t_100,f_jpg’"为你使用的云服务视频截帧方法(默认使用阿里云) |
| 导入项目运行正常，加入自己视频链接黑屏时，按照惯例请先新建项目运行到真机并在video加入你的链接，如果不正常说明你的视频链接本身存在问题或者视频格式不正确或不被支持，App端视频链接请保证在公网下运行 |
2.小程序/H5端
| 小程序/H5端 |
|---|
| nvueSwiper页面适用于：手机H5、小程序 |
| 若出现小程序图片破裂，请修改:poster=“list.src+‘?x-oss-process=video/snapshot,t_100,f_jpg’” |
| 小程序、H5用户请参考视频教程 |
插件解决问题
解决App端视频列表上下滑动、视频自动滑动播放的难点
解决视频播放前黑屏的问题
解决其他短视频组件播放等待加载转圈问题。提前加载，即滑即播
解决视频串音问题
解决滑动问题
优化视频播放性能
精简进度条代码，高度自定义进度条样式
测试情况
安卓测试机型
| 高端机型 | 芯片 | 系统 |
|---|---|---|
| 华为 Mate40 | 麒麟9000 | Android 10.0 |
| 红米 Note3 | 高通骁龙650 | Android 6.0.1 |
说明：高端机型得益于芯片，滑动流畅，其他如上说明。低端机型由于机器太老6年前的安卓手机，滑动太快的时候会卡住，但是过一会就会好。
苹果测试机型
| 高端机型 | 芯片 | 系统 |
|---|---|---|
| iPhone12，iPad Pro2020 | A14，A12Z | iOS14.5、iPadOS 14.2 |
| iPhone6 | A8 | iOS 12.4 |
说明：高端机型得益于芯片，滑动流畅，其他如上说明。低端机型：6年前的苹果产品还是够挺，滑动只是略微卡顿。
插件历程
至2023年2月1日，此插件已经连续更新和维护19个月。
对于如何提升播放性能，如何做到像抖音一样随滑随播，于是在github和gitee和DCloud插件市场和各个论坛，翻遍了播放插件和优化思路，很多插件发布以后都不会再进行长期维护，作者承诺此插件免费发布，并且长期维护，感谢大家对作者工作的支持。
问题反馈
最有效的方式就是加 QQ 群反馈，消息及时，解决速度快。
评论区反馈格式如下：
使用端：App[iOS\Android]（小程序、H5）
问题描述：xxxxx
其他内容：xxxxx
使用端：App[iOS]
问题描述：如何处理安全区高度
其他内容：【配图1】【配图2】
其他说明
代码注释已经一步一步写在代码旁边了
插件可直接粘贴复制，不影响其他功能
此插件原生实现，没有基于第三方原生插件，解决提前预播的难点，视频播放性能再次得到提升。
App端插件引入了评论，这一部分仅做参考
<uni-popup type="bottom" ref="pinglun" @touchmove.stop.prevent="moveHandle"><view :style="'width: '+ windowWidth +'px; height: '+ (boxStyle.height/heightNum) +'px; background-color: #242424; border-top-left-radius: 10px; border-top-right-radius: 10px;'"><!-- 这里就是App评论组件--><douyin-scrollview:Width="windowWidth":Height="(boxStyle.height/1.23)":deleteIOSHeight="36":deleteAndroidHeight="15"@closeScrollview="closeScrollview"></douyin-scrollview></view>
</uni-popup>
具体见：https://ext.dcloud.net.cn/plugin?id=5656
uniapp - 仿抖音短视频项目相关推荐
- 仿抖音短视频项目笔记 （一）产品介绍与数据库设计
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.短视频项目产品设计介绍: 该项目为仿抖音的短视频项目,主要模块有后台短视频管理模块.搜索模块.登录注 ...
- 上车短视频赛道：基于uniapp框架快速搭建自己的仿抖音短视频APP
在今年也就是第48次发布的<中国互联网络发展状况统计报告>有这样一个数据,21年的上半年以来,我国我国网民规模达10.11亿,其中短视频用户达8.88亿.碎片化的生活场景下,短视频成为人们 ...
- 从零开始搭建仿抖音短视频APP-构建后端项目
项目持续创作中... 仿抖音短视频APP项目专栏 目录 聚合工程 构建父工程 构建子工程 构建接口工程并且暴露api接口 优雅Restful相应封装 Lombok与多环境profile 数 ...
- 仿抖音短视频h5单页版htnl上传即可使用源码文件
仿抖音短视频的模板 项目是前后端分离,前端采用uniapp开发,后端目前是用frphp临时搭建的接口,后续为了方便管理内容,会移植到极致cms上.现在也可丢到网站里当一个单页使用,无聊时可以刷一刷短视 ...
- 从零开始搭建仿抖音短视频APP-开发用户业务模块（3）
项目持续更新中: 仿抖音短视频APP专栏 目录 注册登录-BO接受前端参数验证 对BO校验进行统一封装 开发用户是否存在 开发创建用户Service 实现短信注册登录与分布式会话 注册登录-BO接受前 ...
- 从零开始搭建仿抖音短视频APP-后端消息业务模块开发（2）-基础版完结篇
项目持续更新中: 仿抖音短视频APP专栏 目录 系统消息入库保存 MongoDB分页查询系统消息列表 删除系统消息 系统消息入库保存 这里还剩下最后一个点赞评论没有完成 这里如果点赞了你的评论,你们视 ...
- 短视频源码仿抖音短视频APP源码短视频平台源码短视频源码
[WoShop仿抖音短视频源码的主要功能] 1.短视频带货:关联商品的短视频封面会有商品标识,短视频内容中会弹出商品链接 2.直播带货:短视频源码支持直播功能,直播间内可开启带货功能 3.邀请赚钱:用 ...
- 从零搭建仿抖音短视频APP-后端开发短视频业务模块（1）
项目持续更新中: 仿抖音短视频APP专栏 目录 发布短视频的流程梳理 传统上传流程 传统上传 CDN上传 CDN上传流程 使用Unicloud云端功能 实现app端视频上传 保存视频信息入库 发布短视 ...
- 从零开始搭建仿抖音短视频APP-后端开发消息业务模块（1）
项目持续更新中: 仿抖音短视频APP专栏 目录 保存系统消息到MongoDB 系统消息入库保存-关注 系统消息入库保存-点赞短视频 系统消息入库保存-评论与回复 保存系统消息到MongoDB 我们把m ...
最新文章
- 如何在Python中对字符串进行子字符串化
- HTML JS 数据校验
- 禅道启动mysql报错_测试工具之在Linux服务器上部署禅道Bug管理系统
- LAMP环境中如何重新部署一个Yii2.0 web项目
- c++远征之模板篇——运算符重载
- 显卡服务器已停止响应,电脑提示显卡驱动已停止响应并且已成功恢复该怎么解决?...
- 随想录（校园招聘记）
- javax.comm的API
- 如何“ git clone”包括子模块？
- php和java的一些比较
- layui离线文档2.2.5
- 做完c语言通讯录系统后的小结,c语言通讯录管理系统的总结
- 画uml图的在线软件
- DongDong认亲戚(字符串之间的并查集应用)
- 开发微信小程序：创建小程序实例
- 蒙特卡洛算法求矩形内切圆面积
- 运营技巧|如何把产品运营好？
- 【分享】如何判断个人电脑是多少位（32位？还是64位系统）
- iphone app中读取本地txt,csv文件 转载
- 什么是个人热点？安卓手机怎么开启个人热点？