精易论坛

标题: 短视频源码有哪些板块,小视频系统源码技术 [打印本页]

作者: 防666    时间: 2022-5-17 09:54
标题: 短视频源码有哪些板块,小视频系统源码技术
首先我先说下底层UI的搭建,我们可以看到推荐,热门,附近这三个可以切换的导航按钮是与下面呈现短视频程序源码的UISCrollView联动的(其中推荐和热门我使用的是抖音界面,附近使用的是快手界面),这里我使用了完全开源的TYPagerController三方库,这个三方库的使用很广泛,在滑动切换页面卡顿这方面处理的很好,有兴趣的可以详细去看源码,我在这里简单介绍下实现原理。

我创建的类CustomPagerController继承于三方中的TYTabButtonPagerController,这个滑动导航控制器由两部分组成:

上方的TabBar(CollectionCell、UnderLineView构成)
下方的ScrollView(ViewController.View构成)
下面说一下滑动导航控制器的总体流程:

将ViewController.view加入到下方的ScrollView中
根据数据源Titles对上方TabBar中CollectionCell上的Label赋值
处理下方ScorllView与上方TabBar之间的协同问题

短视频有哪些板块?
一、核心功能简介
1.短视频推荐:小视频内容推荐机制,可适用于不同小视频列表内容。
2.短视频录制:支持运营级平台的小视频录制方式,可自定义小视频录制参数。
3.短视频编辑:可对小视频内容进行添加标题、美颜美化编辑,添加贴纸及滤镜等。
4.自定义音乐:在录制短视频内容前,可添加自定义音乐内容,支持接入原创音乐。

二、管理后台
小视频系统源码功能介绍
1.注册登录:支持手机验证码注册登录、QQ、微信一键登录。
2.小视频列表:显示短视频内容列表,热门推荐视频及已关注的视频作者的短视频内容。
3.短视频编辑:添加短视频标题,进行短视频内容剪辑操作,标注心情等。
4.短视频上传:上传编辑完成的短视频内容,可将短视频内容分享至QQ空间、朋友圈等。
5.短视频广告:短视频内容中可添加广告链接,管理后台设置具体广告位视频。
6.评论点赞:可对优质短视频内容点赞。
7.自定义音乐:支持接入不同的三方音乐接口,用户可以进行高品质音乐自定义设置。

具体代码实现如下:

CustomPagerController.h

CustomPagerController.m

接下来就是重点了,对于抖音界面呈现样式的详细介绍。

整体UI静态图:

我先简单说下UI层级的搭建,它最下面是一个UIScrollView,这是实现上下滑动播放的基础,在这里我们要介绍一个很重要的属性,这是UIScrollView滚动自动换页的关键,就是pagingEnabled属性,一定要设置为YES。UIScrollView的上层是三个UIImageView,这三个UIIMageView是实现无限轮播的关键,播放器就铺在UIImageView上面。最上面是包括点赞,评论,滚动唱片和歌曲名字等的一个UIView,这个UIView会在每一个UIIMageView上放一个,它们都是会预先加载的,这样在滑动的时候就不会有卡顿和画面不流畅的问题。这里多说一句,UIIMageView只是会预先加载视频的第一帧,也就是一张图片,并不会预先加载要播放的视频,只有滑动到每个UIImageView的时候,才会开始加载当前的UIIMageView上的视频。

这是UI主要的代码:


基本的UI实现比如点赞按钮一类的我就不介绍了,我主要介绍下左下角滚动的音乐名字和右下角转动的唱片音符这两个动画实现方式。

这两类动画主要是通过核心动画框架QuartzCore来实现的,话不多说看代码:

跑马灯式的左下角音乐名字滚动,实现原理是使用UIView动画使两个紧挨的Label同时向左匀速变动位置。

音符动画的实现原理是通过CAAnimationGroup动画组同时实现移动,放大及渐变透明三个动画,代码中对核心部分进行了详细注释。

唱片旋转动画的原理是使用方法animationWithKeyPath:对 CABasicAnimation进行实例化,并指定Layer的旋转属性作为关键路径进行注册,使其不断旋转。

下面要说的就是重中之重的滑动播放视频了。

当我们首次进入抖音播放短视频页面时,会优先判断当前的视频列表videoList是否有值,如果没有值或当前的视频的index大于videoList.count - 3 时,就会重新请求服务端,获取新的一组短视频。

下面时核心代码


结下来我们要介绍加载页面的三种情况,这里我们会用到三个UIImageView,为firstImageView、secondImageView,thirdImageView,对应三个展示UI的View,分别为firstFront、secondFront、thirdFront,对应三个数据源lastHostDic、hostdic、nextHostDic:

第一种是刚进来currentIndex == 0(currentIndex是指当前滚动到第几个视频),这时候我们要设置UIScrollView的ContentOffset为(0,0), currentPlayerIV(当前UIIMageView)为firstImageView,currentFront(当前呈现UI的View)为firstFront。并且要预加载secondImageView的数据,这里不用处理thirdImageView,因为只能向下滑,不需要预加载thirdImageView并且滚到第二个的时候自然给第三个赋值:

这里的setUerData和setVideoData是给页面加载数据的,详细实现为:



作者: Mouth    时间: 2023-6-5 16:38
感谢分享
作者: Mouth    时间: 2023-10-6 16:08
感谢分享




欢迎光临 精易论坛 (https://125.confly.eu.org/) Powered by Discuz! X3.4