美文网首页iOS开发iOS 直播视频晚期代码癌患者
iOS多模式&富交互视频播放器TTAVPlayer(附源

iOS多模式&富交互视频播放器TTAVPlayer(附源

作者: 唐笛_Dylan | 来源:发表于2017-05-31 13:58 被阅读2677次

    源码可见:[直接点击] (Github中的README有最新的更新日志,和TODO事项,强烈推荐大家关注)

    1.背景

    最近开始抓端体验,播放器作为一个基础功能一直为人诟病:交互不友好,如手势调节播放进度,音量,屏幕亮度,以及对网络状态的处理等。同时也不能支持现在业务场景多样化对播放器的需求等等。于是决定在这一期进行“整治”。

    首先为了支持业务需求的多样化,视频播放器需要支持四种模式:普通模式,竖屏模式,横屏模式,静音模式。

    普通模式:商品内容,文章内容嵌套播放器,H5桥接播放。

    静音模式:列表自动播放时需要,如手淘微淘列表。

    竖屏模式:浸入式体验播放,常常用于H5桥接播放与静音播放时点击查看详情,如微博,手淘微淘。

    横屏模式:最佳播放体验,具有最丰富的交互操作,如快捷调节音量,播放进度,屏幕亮度。

    最终实现效果部分如下:

    普通模式-全屏模式

    竖屏模式-全屏模式

    2.设计概要

    对于基础功能,无论是API级别还是Framework级别,我的设计思想都是"保证最小的接入成本同时保证最大的扩展性"。也就是,对于绝大部分的情况,提供简单易用的API让接入方可以非常方便的接入。但是当接入方需要自定义时,我们也要提供强大的自定义能力。

    那回归到播放器,在第一小节中提到的四种模式其实已经可以满足绝大部分的场景需求。把这些模式预置进播放器设计中,就已经可以保证尽可能少的接入成本,只要在设计上进行分层,把基础功能和UI部分以及各种模式特有的Feature进行分层,新增自定义模式,只提供播放器View的基础控制接口,如播放,暂停,调整进度,全屏等,然后UI部分部分可以完全交由接入方自定义。

    3.详细设计

    基于第二小节的设计思想,我们可以确定播放器的五种模式:

    TTAVPlayer持有一个AVPlayerItem的实例,它提供了我们访问一个视频文件(AVAsset)的接口,如当前播放时间,视频总时间,播放完成,失败的回调等等。在TTAVPlayer这一层,我们基本上可以把所有的播放类的操作进行封装起来,仅仅向外暴露有关视频播放的代理方法,上层只需要去实现这些代理方法就可以得到整个视频播放时需要的信息回调:

    而TTAVPlayerView则是设计出来面向于真正的上层调用者的。这个调用者可能是预设模式,可能是使用自定义模式的接入方。所以TTAVPlayer提供出来的代理方法对上层调用者应该是透明的,而需要由TTAVPlayer提供出调用者真正想需要的代理接口。这些接口不仅全量包含了TTAVPlayerView的回调,还包括一些跟用户相关的回调,比如播放器全屏的回调,视频被点击的回调,播放暂停的回调,View加载完成的回调等等。

    这样的设计保证了TTAVPlayerView代码的纯净性,它与业务代码解耦,只负责了视频播放本身,而不去关心上面的界面渲染以及一些业务操作逻辑。这为自定义模式的扩展性打下了基础。基于此,我们又有了以下设计:

    4.丰富的Feature

    为了提供一个高完成度播放器,我们提供了丰富的Feature:

    1. 横屏模式下手势识别,控制快进/快退、音量调节、屏幕亮度调节,向流行App看齐。

    2. 检测屏幕方向自动切换横竖屏,并且考虑到很多App并未打开横屏开关,采用“假横屏”的方式来模拟,节省了接入成本。

    3. 容错提示页面,温馨提示,提升体验。

    4. 检测网络切换功能,当网络从WIFI切到数据流量时,自动暂停视频;

    5. 静音播放模式,让用户在公共场所看视频不尴尬。

    5.怎样在项目中使用TTAVPlayer

    对于不使用Cocoapods的用户:首先你需要了解目前iOS SDK需要支持的四种指令集:X86_84,i386(针对模拟器),ARMv7,ARM64(针对真机,32位和64位CPU之分)。一个完整的SDK需要支持这四种指令集。

    1. 首先使用TTAVPlayer Framework的源码,在Xcode的Target处选取两种target:Xcode支持的最新模拟器 && Generic iOS Device。分别进行编译,最后在Product目录里,拿到相应的Framework保存下来。

    2. 打开这两个Framework,取出Framework中的静态库文件TTAVPlayer(不带任何后缀名),然后将这两个静态库文件,使用lipo -create命令合并成一个。

    3. 打开任意一个Framework文件,将原本的静态库文件替换成合并后的静态文件。

    4. 在编译的主工程的copy resource bundle里,添加对Framework中Resource.bundle的引用。

    5. 集成完毕。请注意,TTAVPlayer的最低系统支持版本为iOS 7.0。

    对于使用Cocoapods的用户,我会尽快添加对pods的支持,请大家关注Github的README!

    6.Tips

    1. 如对代码有不解或者发现Bug以及希望增加新的Feature,可直接github提issue,我会尽量解掉。

    2. Demo请尽量运行在真机上。

    3. 需要探讨可直接联系我,联系方式如下。

    知乎:[直接点击]

    GitHub:[直接点击]

    简书:[直接点击]

    相关文章

      网友评论

      • okerivy:框架封装的很好, 希望楼主继续维护, 手动集成说的不是太详细, 对我这等小白来说搞了2个小时才集成好:sweat_smile: 还不清楚有木有问题:heart_eyes: 不过已经能运行了
        希望1, 手动集成教程详细点, 2, 希望增加本地播放
        :clap: 辛苦了
      • f7139db11dcd:你的集成方式,是不是先编译模拟器然后找到对应路径取framework ,然后再编译真机去对应路径取framework ,最后用终端把他们合并成一个。
        唐笛_Dylan:@HZW_sister 是的~
      • 落叶护花:TTAVPlayer如何释放,现在我push到一个controller后播放然后退出,发现并没有释放,当请求到资源后又自己播放了
        唐笛_Dylan:@996dd8dfd69e 诶,正常关闭应该已经释放了吧?等我测试一下给你结果。
      • Eddiegooo:感谢开源 准备集成到项目里用下 , 我想问下,手动集成到项目里,是直接将TTAVPlayer文件拖到项目里吗? 这样子运行报错 好多文件找不到。。
        Eddiegooo:@唐笛_Dylan 还是不行啊 可否细致和我说一下? 都需要把那些文件拖到项目里,还要设置什么? 我们项目都是手动集成第三方。:sweat:
        Eddiegooo:@唐笛_Dylan 好的 O(∩_∩)O谢谢
        唐笛_Dylan:你好,感谢关注。如果是手动集成的话直接把TTAVPlayer.framework加入你的主工程,也就是link library那。如果需要CocoaPods的支持的话,请在Github上提一个issue,我会跟进的:smile:
      • FR_Zhang:我擦 发现我写的TTFrameWork....感觉像一家人
        唐笛_Dylan:@FR_Zhang 好嘞
        FR_Zhang:@唐笛_Dylan 哈哈 www.ittutu.com 可以来玩啊
        唐笛_Dylan:哈哈哈哈,我是按照自己的姓来的~
      • 心对:不错,下载看看
      • 9岁就很6:厉害了
      • d20cdad48d2e:支持哪些格式?
        唐笛_Dylan:因为是基于AVPlayer的,所以同AVPlayer支持的格式一样: WMV,AVI,MKV,RMVB,RM,XVID,MP4,3GP,MPG等。

      • 姜流儿96:感谢开源
        唐笛_Dylan:一起完善!
      • Areslee:感谢开源
        唐笛_Dylan:一起完善!
      • 漫步的小蚂蚁:我有播放本地的视频需求:smile:
        唐笛_Dylan:@漫步的小蚂蚁 Soga,OK,这个实现成本不是很大。等我空了在VideoInfo里面加上本地链接的扩展~
        漫步的小蚂蚁:@唐笛_Dylan 拍摄视频,存入本地,就是预览点击播放,
        唐笛_Dylan:具体需求是怎样的?
      • layjoy:写得不错:clap:
        唐笛_Dylan:@layjoy 多谢:smile:
      • 海岸没有沙:简单的看了一下,是播放网络视频,如果再加上本地视频播放估计就更完美了!
        海岸没有沙:@唐笛_Dylan 非常感谢你的分享,我只是突然想到本地播放的,暂时没有这个需求,如果后期有的话可能就会麻烦你的!!!:smile:
        唐笛_Dylan:iOS上播放本地视频的需求比较少,所以当时没考虑。如果你有一些特殊场景下的需求,可以在github上提一下,我看看怎么办:smile:
      • WS_0909:普通模式下 先断网后连接 然后点击刷新 他播了十几秒吧 就crash 了
        唐笛_Dylan:@WS_0909 OK,我们线上跑的也是这个播放器,目前未收到类似crash报过来~,你可以放心先用。模拟器上的问题我跟一下:smile:
        WS_0909:@唐笛_Dylan 当时用的是模拟器
        唐笛_Dylan:如果是模拟器的话,可以先换到真机。在模拟器上有时候会出现BAD_ACCESS的错误,我和同事在看,但是在真机目前是没有发现问题的。
      • 我在鄱阳湖边:贴点效果图
        唐笛_Dylan:第一小节有普通模式,竖屏模式,横屏模式的gif。你具体是想要什么效果图呢?

      本文标题:iOS多模式&富交互视频播放器TTAVPlayer(附源

      本文链接:https://www.haomeiwen.com/subject/zbblfxtx.html