仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)

仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)

运行条件

HBuilder X 2.2.2

安装后,从插件市场导入,即可真机运行

vue

项目地址

github https://github.com/15157757001/scroll-video

uniapp插件市场 https://ext.dcloud.net.cn/plugin?id=664

说明

插件分别用swiper实现(多端兼容)和css3动画实现(暂时只支持app),可自行切换。

插件在uni-app编译模式下编写(已切换)。

默认为weex编译模式,在 manifest.json 的源码视图里配置是切换模式, manifest.json -> app-plus -> nvueCompiler 切换编译模式。

swiper在非App端内嵌video性能比较差,不建议导入过多视频。

项目效果

h5在线地址 https://github.com/15157757001/15157757001

原文地址:https://www.cnblogs.com/chunleiLe/p/11744033.html

时间: 2024-10-12 03:12:04

仿抖音上下滑动播放视频(兼容安卓,ios,小程序,h5)的相关文章

仿抖音上下滑动分页视频

目录介绍 01.先来看一下需求 02.有几种实现方式 2.1 使用ViewPager 2.2 使用RecyclerView 03.用ViewPager实现 3.1 自定义ViewPager 3.2 ViewPager和Fragment 3.3 修改滑动距离翻页 3.4 修改滑动速度 04.用RecyclerView实现 4.1 自定义LayoutManager 4.2 添加滑动监听 4.3 监听页面是否滚动 4.4 attach和Detached 05.优化点详谈 5.1 ViewPager改变

真的可以开发出一个像抖音一样的短视频APP吗?

"开发一个像抖音一样的短视频APP",你觉得可能实现吗?实现起来难吗? 短视频APP短短几年就火遍大江南北,成为男女老少休闲娱乐的一种方式,由此可见短视频APP的势头发展十分迅速,比如:抖音.快手.秒拍这些大家熟悉的短视频软件,你手机里至少会有一个. 开发一个像抖音一样的APP难度大吗?开发一个像都一样的短视频APP,是可是实现的,但是这个过程中有很多技术难点,以及需要结局的困难,看似简单的一个短视频APP,其实在开发过程中有很大的难度,主要体现在短视频APP功能点多,功能机制复杂:还

呆萌短视频app定制开发:抖音已经开启“短视频+电商”新模式已经开始了???

呆萌短视频app定制开发:抖音已经开启"短视频+电商"新模式已经开始了呆萌短视频带您一起分析下从快手到抖音,短短几年,短视频火遍大江南北,短视频已经成为了大众在网上消遣闲暇时光的重要渠道之一,如果说直播还是个风口,那么,呆萌短短视频就处于暴风口上.近年来,快手.秒拍.抖音.火山.梨视频.秒拍等短视频平台发展势头十分迅猛,尤其是字节跳动(今日头条母公司)旗下的抖音,自2016年9月上线至今,月活用户已突破1.2亿,去年末以来长期高居iOS应用排行榜前两名.当下正是直播平台呈爆发式的趋势增

iOS 仿抖音 视频裁剪

1.最近做短视频拍摄.其中的裁剪界面要做得和抖音的视频裁剪效果一样 需求:  裁剪有一个最大裁剪时间.最小裁剪时间.左右拖动可以实时查看对应的视频画面.拖动进度条也能查看对应的画面 .拖动底部视图也能查看对应视频.查看的对应视频始终是进度条对应的位置 2.设计思路 底部是一个视频播放器 SJVideoPlayView 播放器上面试一个视频裁剪视图 SJVideoCropView 里面包含一个  UICollectionView  用来加载视频缩略图 左右滑块以及进度条 拖动左右滑块.进度条.以及

轮播图中播放视频 兼容处理

{"isShowVideo":"1","videolist":[ {"desc":"000","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"00","url":"",&qu

最新小程序教学视频,欢迎加小程序交流群免费获取(微信小程序开发(交流QQ群:604788754)

本群会定期分享在工作中做的一些小程序页面,不懂之处也可以随时咨询,可以互相交流学习. 教学视频直接入群,在群公告中显示,优秀小程序代码在群文件中免费获取. 今日代码小程序首页欢迎页面,效果图如下.代码请加群之后,查看2017.5.16的文件,免费下载.

移动端web无刷新上传图片【兼容安卓IOS】

需求 手机端网页或者微信无刷新上传头像 环境 手机浏览器或者微信浏览器(支持HTML5) 实现方式 LocalResizeIMG 地址 https://github.com/think2011/LocalResizeIMG(原版地址) 链接: http://pan.baidu.com/s/1ntNYXrb 密码: 71cp(个人修改版) 说明 原版只能指定固定的图片宽度,而修改版扩展原图片上传 使用方式 <h1 class="text-center">LocalResize

移动端图片上传方法【更好的兼容安卓IOS和微信】

之前的移动端上传的方法,有些朋友测试说微信支持不是很好,还有部分安卓机也不支持,其实我已经有了另一个方法,但是例子还没整理出来,而联系我的很多朋友需要,所以就提前先发出来了,并且做一个简单的说明,就不做一个demo了. <!doctype html>  <html>  <head>  <meta charset="utf-8">  <meta name="viewport" content="width

如何用PR制作火爆抖音上的上下滑动视频

最近抖音上的,上下滑动视频非常火爆,那么这样的视频是如何制作的呢?在做之前我们需要将视频准备好,不管你是下载的视频,还是录制的视频都需要准备好,还有文字内容也准备一下最好,接下来我们就来分享一下图文制作方法. https://www.macdown.com 先看一下最终的效果,如图 1. 首先打开Premiere软件,新建项目-名称(自己命名),位置(浏览找个合适的位置存放)然后点确定: 2.新建序列-点文件-新建序列-序列预设-AVCHD-1080P-AVCHD 1080P25(1920*10