关于IOS自定义视频播放器若干问题的整理（上篇）

背景

之前有做过公司项目关于android和ios视频播放器的问题，就在网上搜索了一番，由于公司需求的视频和外界的视频不大一样，所以很多技术文章对我来说很难完整应用，拼拼凑凑了解了基本的情况。所以在这里记录下如何制作了一个尽量能公用的播放器，讲述一些制作播放器时常遇到的问题，如果一些同学有源码需要，我会尽量去整理出一份来。而该文章的发布也因为本人时间问题分为多篇进行发布，尽量能在上下两篇里面结束。主要是整理下上述功能在IOS开发上的一些问题的解决办法，而如果有需要Android的我也可以抽时间去整理下。

说明

本公司做的是互联网教育平台，有自制的课件格式，当然在web上已经有了flash的课件播放器，所有自制课件格式分为三种，PDF格式课件，纯视频课件，三分屏课件。这些课件在用户观看时都会有学习进度，最后播放时间的记录。本篇文章主要是介绍了自定义播放器的基本功能部件结构，如何从这些结构着手对该项目的一个解剖。

1. PDF格式课件

普通的PDF格式的文件，在移动端不做要求。

2. 纯视频课件

类似于优酷，土豆的视频，不过在WEB上是用flash进行flv的播放，每个课件有多个章节，每个章节有多个flv视频段，播放一个章节的总时间按照这个章节中所有视频段进行计算，这样可以节省服务器瞬时流量，类似于M3U8的一种做法。

3. 三分屏课件

视频文件结构与上述纯视频一样，唯一不同的是，三分频在播放老师视频的同时，还要播放老师的讲义，而讲义部分并不是在制作视频时，已经做进了视频里面，而是单独拎出来的图片，在播放课件之前，先有一段xml的课件说明，里面包含了在何时段播放哪张讲义图片，当然里面有一些讲义图片出现是的过渡动画命令这里不做详细分析。

任务

当然在这里主要讲述如何制作一个自定义的视频播放器，可以播放进行播放上述纯视频、三分屏或者更多其他模型的视频（这个视频并不是所述的视频格式，如ts，mp4，或者由ts组合的m3u8文件）。我在这里会整理出一个基本的框架思路，将播放器各个功能部件分隔开了，以便实现上述的视频模型。
主要功能可以参照优酷，土豆的播放器，这边就写的比较简约，很多功能只是照葫芦画瓢，所以不会在这里写的面面俱到。

1. 基本样式解析

样式分为竖屏和横屏两个状态。

2. 基本部件解析

竖屏状态为简易状态，部件较少，一般是下部的控制栏(ControlBarA)和中间视频画面框(FrameA)两个部分。
横屏状态经常用于全屏状态，部件比较全，一般常用的是下部控制栏(ControlBarB)、中间视频画面框(FrameB)、上部的导航栏(NavigationBarB)。
当然还有一些音量控制，视频相关栏等栏目内容可以通过上述的导航栏和控制栏进行举一反三，这里就不再赘述。

3. 部件整体解析

据上所述，可以从竖屏和横屏状态进行总结出所用到的部件。
整个视频播放器由控制栏(ControlBar)、中间视频画面框(Frame)、导航栏(NavigationBar)三个部分组合。只是在横屏与竖屏转换时，响应的部件会有多套方案显示或隐藏而已。
如竖屏时我们看到的只有ControlBarA，而在竖屏时，我们看到ControlBarA已经隐藏ControlBarB显示，相应的NavigationBarB也显示了。而Frame基本没有多大的改变。在这里ControlBarA和ControlBarB可以不做简单的做成一个ControlBar。
这里要注意的是，我用Frame说明视频画面显示的区域，而不是直接使用Video。因为我的工作中需要考虑到“三分屏”这个视频结构，在Frame区域需要显示的不仅仅只有视频画面，还有讲义图片的画面。

功能框架

ControlBar：负责实现播放暂停，视频进度，全屏和非全屏按钮的实现。
NavigationBar: 负责全屏状态下返回成竖屏状态，视频标题的实现。
Frame：该区域负责显示视频画面，如果是纯视频单独的显示Video画面，三分屏就需要显示一个video画面和一个讲义image画面了。而且还要有全屏等功能，所以这一块也是核心模块，功能比较负责，并且要贯穿上面的ControlBar和NavigationBar，如果有其他Bar模块也会涉及到。当然在IOS中Frame就可以使用UIView的自定义父类去实现。
从上面的ControlBar、NavigationBar和Frame可以分析下编程的结构，在ControlBar和Navigation中分别定义各自的protocol，而在Frame中去实现这两个protocol。不能看出Frame在MVC中充当了C的角色（如果有同学觉得疑问为什么ControlBar不去做C的角色？这边我只能略微带过，将来我会将MVC的心得再发表下文章和大家讨论。因为每个人都有自己MVC的方案，MVC不是唯一的而是一种编程解决问题的思路而已。这里我们只对播放器在IOS上面一些问题踢出解决方案）。

那么问题来了

• IOS页面旋转控制如何实现？
• 当然应用做出来尽量是用到autolayout的，如何在代码或IB上实现？
• ControlBar和NavigationBar又该用什么去实现，怎样控制？
• 核心的问题是Frame该怎么去做，说好的Video去哪了？
• 那么视频进度如何获取？
• 视频缓冲在哪里？

上述就是我们要说的自定义播放器基本上要解决的问题，当然这些我会在下一篇依依整理出来。