在播放视频时，上下滑动来切换视频源是种很好的体验，就像下图中新浪的微博和新闻客户端，以及inke直播等APP的视频播放页面，很容易让用户产生看完一个再看一个的冲动。
这种滑动切换播放内容的实现方式，新浪微博来看，可以采用基于TableView的方案，滑动表格，通过一定算法判断哪个Cell的内容应该被播放。inke直播的方案更像是通过scrollView滑动分页的效果。相对而言，TableView的方案当列表中视频数量较多，需要考虑性能上的问题，而scrollView的方案可以参考图片无限轮播的实现方式，只不过不用实现定时翻页，仅需实现滑动翻页。
本文用的是scrollView方案，实现类似inke的视频播放界面，滑动切换主播功能。
回想用scrollView实现无限图片轮播的方法，可以采用三个imageView，作为scrollView的left，middle，right子视图，滑动scrollView，在-(void)scrollViewDidScroll:(UIScrollView *)scrollView的代理中去实现三个imageView的图片切换，从而达到看上去可以无限滚动的效果。这样的效果也适合用在这里。
直接说说如何实现。我用的是ijkplayer实现对视频流的解码，参考ijkplayer的Demo，创建一个IJKFFMoviePlayerController对象player作为真正的播放界面，把player的View作为一个subView放在scrollView的中间，scrollView实际上仅仅负责滑动切换player播放的链接，这样整个播放界面只要一个player，就可以实现滑动切换主播的功能。为了方便，可以创建一个继承于scrollView的类PlayerScrollView， 需要在初始化时，指定所需要的frame大小，以及更新需要播放的主播列表和当前主播在列表中的index。PlayerScrollView头文件如下：
//
// SamPlayerScrollView.h
//
//
#import <UIKit/UIKit.h>
@class SamPlayerScrollView;
@protocol SamPlayerScrollViewDelegate <NSObject>
- (void)playerScrollView:(SamPlayerScrollView *)playerScrollView currentPlayerIndex:(NSInteger)index;
@end
@interface SamPlayerScrollView : UIScrollView
@property (nonatomic, assign) id<SamPlayerScrollViewDelegate> playerDelegate;
@property (nonatomic, assign) NSInteger index;
- (instancetype)initWithFrame:(CGRect)frame;
- (void)updateForLives:(NSMutableArray *)livesArray withCurrentIndex:(NSInteger) index;
@end
其中还定义了一个协议，用于在滑动scrollView时通知外界滑动后的index，以便于player可以切换播放链接。
//
// SamPlayerScrollView.m
//
//
#import "SamPlayerScrollView.h"
#import "SamLive.h"
@interface SamPlayerScrollView () <UIScrollViewDelegate>
@property (nonatomic, strong) NSMutableArray * lives;
@property (nonatomic, strong) SamLive *live;
@property (nonatomic, strong) UIImageView *upperImageView, *middleImageView, *downImageView;
@property (nonatomic, strong) SamLive *upperLive, *middleLive, *downLive;
@property (nonatomic, assign) NSInteger currentIndex;
@end
@implementation SamPlayerScrollView
- (NSMutableArray *)lives
{
if (!_lives) {
_lives = [NSMutableArray array];
}
return _lives;
}
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
self.contentSize = CGSizeMake(0, frame.size.height * 3);
self.contentOffset = CGPointMake(0, frame.size.height);
self.pagingEnabled = YES;
self.opaque = YES;
self.backgroundColor = [UIColor yellowColor];
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.delegate = self;
// image views
// blur effect
UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
// blur view
UIVisualEffectView *visualEffectViewUpper = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *visualEffectViewMiddle = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
UIVisualEffectView *visualEffectViewDown = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
self.upperImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
self.middleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, frame.size.height, frame.size.width, frame.size.height)];
self.downImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, frame.size.height*2, frame.size.width, frame.size.height)];
// add image views
[self addSubview:self.upperImageView];
[self addSubview:self.middleImageView];
[self addSubview:self.downImageView];
visualEffectViewUpper.frame = self.upperImageView.frame;
[self addSubview:visualEffectViewUpper];
visualEffectViewMiddle.frame = self.middleImageView.frame;
[self addSubview:visualEffectViewMiddle];
visualEffectViewDown.frame = self.downImageView.frame;
[self addSubview:visualEffectViewDown];
}
return self;
}
- (void)updateForLives:(NSMutableArray *)livesArray withCurrentIndex:(NSInteger)index
{
if (livesArray.count && [livesArray firstObject]) {
[self.lives removeAllObjects];
[self.lives addObjectsFromArray:livesArray];
self.currentIndex = index;
_upperLive = [[SamLive alloc] init];
_middleLive = (SamLive *)_lives[_currentIndex];
_downLive = [[SamLive alloc] init];
if (_currentIndex == 0) {
_upperLive = (SamLive *)[_lives lastObject];
} else {
_upperLive = (SamLive *)_lives[_currentIndex - 1];
}
if (_currentIndex == _lives.count - 1) {
_downLive = (SamLive *)[_lives firstObject];
} else {
_downLive = (SamLive *)_lives[_currentIndex + 1];
}
[self prepareForImageView:self.upperImageView withLive:_upperLive];
[self prepareForImageView:self.middleImageView withLive:_middleLive];
[self prepareForImageView:self.downImageView withLive:_downLive];
}
}
- (void) prepareForImageView: (UIImageView *)imageView withLive:(SamLive *)live
{
// download images for ImageView.
}
- (void)switchPlayer:(UIScrollView*)scrollView
{
CGFloat offset = scrollView.contentOffset.y;
if (self.lives.count) {
if (offset >= 2*self.frame.size.height)
{
// slides to the down player
scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
_currentIndex++;
self.upperImageView.image = self.middleImageView.image;
self.middleImageView.image = self.downImageView.image;
if (_currentIndex == self.lives.count - 1)
{
_downLive = [self.lives firstObject];
} else if (_currentIndex == self.lives.count)
{
_downLive = self.lives[1];
_currentIndex = 0;
} else
{
_downLive = self.lives[_currentIndex+1];
}
[self prepareForImageView:self.downImageView withLive:_downLive];
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
}
}
else if (offset <= 0)
{
// slides to the upper player
scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
_currentIndex--;
self.downImageView.image = self.middleImageView.image;
self.middleImageView.image = self.upperImageView.image;
if (_currentIndex == 0)
{
_upperLive = [self.lives lastObject];
} else if (_currentIndex == -1)
{
_upperLive = self.lives[self.lives.count - 2];
_currentIndex = self.lives.count-1;
} else
{
_upperLive = self.lives[_currentIndex - 1];
}
[self prepareForImageView:self.upperImageView withLive:_upperLive];
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
}
}
}
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self switchPlayer:scrollView];
}
@end
在实现文件中，- (instancetype)initWithFrame:(CGRect)frame初始化了scrollView的frame并添加了三个imageView和三个毛玻璃效果。- (void)updateForLives:(NSMutableArray *)livesArray withCurrentIndex:(NSInteger)index用于更新主播列表和当前index，这样可以直接确定scrollView的middleImageView的image，上面的和下面的ImageView需要注意的是传入的index为边界时的赋值。
最关键的是- (void)switchPlayer:(UIScrollView*)scrollView方法，切换的逻辑在这里，该方法在-(void)scrollViewDidScroll:(UIScrollView *)scrollView中被调用。当向上滑动一个self.frame.size.height距离时，认为scrollView上滑并需要显示下方的downImageView，此时对于upperImageView和middleImageView非常好处理，仅需依次将下方的ImageView移动到上方。问题的关键在于downImageView需要加载的内容，如果当前的_currentIndex等于数据源列表数减1，那么需要把列表的firstObject赋给downImageView；如果当前的_currentIndex等于数据源列表数，说明之前的downImageView的内容已经为列表的firstObject，再向后移动一次为第二个元素，self.lives[1]，并且这时候把_currentIndex置0，因为此时中间的middleImageView显示的是列表的firstObject；其他情况下，把列表的下一个元素赋值给downImageView即可。当一次上滑动作完成，调用委托方法，把当前的index反馈回控制器。类似的，当向下滑动一个self.frame.size.height距离时middleImageView需要显示原来在upperImageView中的内容，这时需要注意的边界是_currentIndex为0和-1。
定义好PlayerScrollView之后，就可以在播放界面使用它。在实现文件PlayerViewController.m中，惰性初始化playerScrollView：
- (SamPlayerScrollView *)playerScrollView
{
if (!_playerScrollView) {
_playerScrollView = [[SamPlayerScrollView alloc] initWithFrame:self.view.frame];
_playerScrollView.playerDelegate = self;
_playerScrollView.index = self.index;
}
return _playerScrollView;
}
调用- (void)updateForLives:(NSMutableArray *)livesArray withCurrentIndex:(NSInteger) index更新数据，并将player的View作为子视图加载到scrollView上[self.playerScrollView addSubview:self.player.view];
当有效滑动时，在委托方法中重载播放器：
- (void)playerScrollView:(SamPlayerScrollView *)playerScrollView currentPlayerIndex:(NSInteger)index
{
if (self.index == index) {
return;
} else {
[self reloadPlayerWithLive:self.dataList[index]];
self.index = index;
}
}
这样就实现了上下滑动切换视频源的功能，总体滑动流畅，开销较小。最后，一个较完整的Demo在这里。
