视频播放器的封装(支持横竖屏切换、cell上播放)
用了几天断断续续的空闲时间封装了一个视频播放器ZWPlayer，支持横竖屏切换、cell上播放、滚动UITableView停止视频、以及滚动UITableViewcell视频播放器缩小到底部播放，具体请看如下效果图。这篇文章主要是讲这个视频播放器封装的总体思路。针对具体细节并没有说太多，这里主要是针对几个自己感觉值得注意的地方说明了下。具体实现请看Demo，Demo下载地址：https://github.com/ZhengYaWei1992/ZWPlayer
cell上播放动画效果
全屏竖屏状态
全屏横屏状态
非全屏状态
在研究视频播放相关的问题之前必须能弄懂一个很重要的问题，如何正确的控制横竖屏切换问题。具体请参考我之前写的文章：http://www.jianshu.com/p/5be7eaf4a1a6。这里简简单说下，一般在项目中控制横竖屏问题，主要代码一般会写在UITabbarController中。而不是直接写在UIViewController中，因为即使写在UIViewController在push的情况下也不会起到什么作用，最终的控制权是有UITabbarController控制的。当然这种情况只是针对push而言，如果仅仅是针对模态进入的控制器，情况又会完全相反。看看tabBarController中是如何控制屏幕是否支持旋转的。一般主要是重写系统的下面另个方法，来控制特定页面是否支持旋转。这里只是简单说说，想了解更多，就参考上面的连接。
- (BOOL)shouldAutorotate{
UINavigationController *nav = self.viewControllers[self.selectedIndex];
if ([nav.topViewController isKindOfClass:[ViewController2 class]]) {
return YES;
}else if ([nav.topViewController isKindOfClass:[A_A_ViewController class]]){
return YES;
}
return NO;
}
- (UIInterfaceOrientationMask)supportedInterfaceOrientations{
UINavigationController *nav = self.selectedViewController;
if ([nav.topViewController isKindOfClass:[ViewController2 class]]) {
return UIInterfaceOrientationMaskAllButUpsideDown;
}else if ([nav.topViewController isKindOfClass:[A_A_ViewController class]]){
return UIInterfaceOrientationMaskAllButUpsideDown;
}
// 其他页面
return UIInterfaceOrientationMaskPortrait;
}
说下视频播放器的层次结构，这里我将控制层和播放曾完全给剥离开来编写代码，在视频播放器的最上层是一个透明的UIView，这个UIView上放置了多个控件，诸如：返回按钮、暂停、加载提示、时间label、UISlider、精度条以及全屏按钮。而播放层主要用于播放视屏，处理一些业务逻辑，诸如屏幕旋转、缓冲进度计算、视屏播放状态监控以及是否处于前台、是否退出应用等。所以在实际风装这个视频播放器的过程中，主要是创建了两个类ZWPlayerControlView（控制层）和ZWPlayerView（处理播放相关业务逻辑），以及一个ZWPlayer，这个类主要是对外提供接口，以及一些常量的宏都放置在这个类里面。
控制层布局虽然简单，但是有一点值得去说的。可能会有人疑惑类似这种带有加载精度的控制条是怎么弄得，可能有人会猜测UISlider难道还有一些其他自己不知道的属性。其实并不是这样的，带有缓冲的进度条主要是通过UISlider和UIProgerssView两个控件相互结合的。其中UIProgressView主要负责显示加载进度，剩下的播放进度、宽进、后退都是由UISlider完成的。
看一下ZWPlayer中是如何监听屏幕旋转的。这里监听屏幕旋转的主要目的是为了更变全屏按钮的状态，至于控制层使用的是Masonry设置的约束。
[[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(onDeviceOrientationChange)
name:UIDeviceOrientationDidChangeNotification
object:nil
];
- (void)onDeviceOrientationChange{
if (_isCellVideo) {
return;
}
UIDeviceOrientation orientation = [UIDevice currentDevice].orientation;
UIInterfaceOrientation interfaceOrientation = (UIInterfaceOrientation)orientation;
switch (interfaceOrientation) {
case UIInterfaceOrientationPortraitUpsideDown:{
self.controlView.fullScreenBtn.selected = YES;
self.isFullScreen = YES;
}
break;
case UIInterfaceOrientationPortrait:{
self.isFullScreen = !self.isFullScreen;
self.controlView.fullScreenBtn.selected = NO;
self.isFullScreen = NO;
}
break;
case UIInterfaceOrientationLandscapeLeft:{
self.controlView.fullScreenBtn.selected = YES;
self.isFullScreen = YES;
}
break;
case UIInterfaceOrientationLandscapeRight:{
self.controlView.fullScreenBtn.selected = YES;
self.isFullScreen = YES;
}
break;
default:
break;
}
}
虽然上面的代码片段可以在设备屏幕旋转的时候，更新全屏按钮的状态。但针对于设备并没有旋转，点击了全屏按钮在竖屏和横屏之间切换，这又是如何做到的呢？这里主要是强制更新设备方向，具体请看如下代码片段。下面的代码片段针对ARC和非ARC两种情况均提供了解决方案，但是有一点要注意： [[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:UIInterfaceOrientationLandscapeRight] forKey:@"orientation"];这具代码不能直接拿来使用，否则可能会被拒绝上架。
- (void)interfaceOrientation:(UIInterfaceOrientation)orientation{
// arc下
if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
SEL selector = NSSelectorFromString(@"setOrientation:");
NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
[invocation setSelector:selector];
[invocation setTarget:[UIDevice currentDevice]];
int val = orientation;
// 从2开始是因为0 1 两个参数已经被selector和target占用
[invocation setArgument:&val atIndex:2];
[invocation invoke];
}
/*
// 非arc下
if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
[[UIDevice currentDevice] performSelector:@selector(setOrientation:)
withObject:@(orientation)];
}
// 直接调用这个方法通不过apple上架审核
[[UIDevice currentDevice] setValue:[NSNumber numberWithInteger:UIInterfaceOrientationLandscapeRight] forKey:@"orientation"];
*/
}
针对于常规的视屏播放就讲这么多，下面针对cell上播放视频简单的说一下。cell上播放视屏，首先要考虑一点，ZWPlayer负责播放视频的这个类，最好是创建一个单例对象。除了这一点，接下来着重要考虑的两点是关于复用的问题以及如何监控UITableView的滚啊东，判断当前播放器是否依然在可视区域。
首先来看看如何在滚动UITablview的时候解决复用问题。如下代码主要是写在创建UITablViewCell的一个代理方法中。
if (indexPath.row== _currentIndexPath.row) {
[cell.playBtn.superview sendSubviewToBack:cell.playBtn];
}else{
[cell.playBtn.superview bringSubviewToFront:cell.playBtn];
}
NSArray *indexpaths = [tableView indexPathsForVisibleRows];
if (![indexpaths containsObject:_currentIndexPath]) {//复用
if ([[UIApplication sharedApplication].keyWindow.subviews containsObject:_playerView]) {
_playerView.hidden = NO;
}else{
_playerView.hidden = YES;
}
}else{
if ([cell.picView.subviews containsObject:_playerView]) {
[cell.picView addSubview:_playerView];
[_playerView play];
_playerView.hidden = NO;
}
}
再来看看，如何判断当前播放视屏的cell是否已经滚出可视区范围之内。
//tableViewCell离开界面，视频消失
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (scrollView == self.tableView) {
if(_playerView == nil){
return;
}
if (_playerView.superview) {//播放的cell在当前屏幕可视区
CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:_currentIndexPath];
CGRect rectInSuperview = [self.tableView convertRect:rectInTableView toView:[self.tableView superview]];
if (rectInSuperview.origin.y<-self.currentCell.picView.frame.size.height||rectInSuperview.origin.y>[UIScreen mainScreen].bounds.size.height-64-49) {//往上拖动
if ([[UIApplication sharedApplication].keyWindow.subviews containsObject:_playerView]&&_isBottomVideo) {
_isBottomVideo = YES;
}else{
//播放视频的cell不在当前可视区范围内,放到window，在底部显示
[self toBottomVideo];
}
}else{
if ([self.currentCell.picView.subviews containsObject:_playerView]) {
}else{
//播放视频的cell在当前可视区范围内，回到原来的cell上继续播放
[self toCell];
}
}
}
}
}
