uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流

本文涉及的产品
无影云电脑个人版,1个月黄金款+200核时
无影云电脑企业版,4核8GB 120小时 1个月
资源编排,不限时长
简介: 阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。

仿抖音 仿陌陌 短视频 无限滑动播放 视频流

概要

该demo适用于短剧视频类App实现参考,方便大家在这基础上进行快速开发应用。

无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。

源代码
观看演示视频

视频基于阿里云点播服务的web播放器sdk,sdk介绍地址:
https://help.aliyun.com/zh/vod/developer-reference/overview-14?spm=a2c4g.11186623.0.0.243125e85SZmqH

注意:demo和视频插件均基于uniapp实现,而非uniapp x,这点请大家务必注意,避免因兼容问题照成不可用而损失

主要功能供包括:

  1. 提供导航页面骨架,包括主页、追剧、我的。
  2. 实现了首页的发现和推荐页面滑动切换功能。
  3. 实现视频流上下滑动播放功能,并和其他功能页面的结合。

注意:demo中使用的播放器面板为 xqx-player 插件,已经完成适配,可以搜索插件市场查看详情。如果希望改为自己的播放器实现,需要自行完成适配工作。

主要页面介绍

  1. pages/index/index.vue 首页,竖向横向滚动展示内容,左右滑动切换内容页面
  2. pages/index/discor.vue 短剧发现组件页面
  3. pages/index/foryou.vue 短剧推荐组件页面,集成视频插件xqx-player,演示插件推荐模式的使用
  4. pages/playlet/detail.vue 短剧详情参考页面
  5. pages/playlet/episodes.vue 剧集播放页面,集成视频插件xqx-player,演示插件剧集模式的使用

例子图示

fm1.jpg
fm2.jpg
fm3.jpg
fm4.jpg

相关文章
|
4月前
|
存储 前端开发 安全
盲盒app游戏系统开发参考版/需求分析/规则玩法
开发盲盒App游戏系统的流程和细节可能因具体需求和技术实现而有所不同。以下是一般性的开发流程和相关细节,供您参考:
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的成人教育APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的成人教育APP附带文章源码部署视频讲解等
54 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的房屋租赁App附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的房屋租赁App附带文章源码部署视频讲解等
56 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的环境保护生活App附带文章源码部署视频讲解等
60 0
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
477 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
529 1
|
17天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
122 1
uniapp一个人开发APP关键步骤和考虑因素
|
1月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
71 9
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
189 1