简概:
- 本次文章分别讲述两种视频列表全屏滑动切换播放的视方式。
- Demo 中使用的播放器原本是 Bilibili/ijkplayer 后续为了方便集成，改为了ksvc/KSYMediaPlayer_iOS
- 如果你有问题，或者对下述文字有任何意见与建议，除了在文章最后留言，还可以在微博@茅坑里的石头-_-上给我留言，或者联系我的邮箱hu-yangyang@qq.com，以及访问我的Github。
- 文章某尾会给到Demo(请在真机上调试)。
Demo滑动效果
解决方案一
- UIScrollView + KSYMediaPlayer 这里是用UIScrollView 和 三张背景图片做无限轮播，播放器铺在上方。
- (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 clearColor];
self.showsHorizontalScrollIndicator = NO;
self.showsVerticalScrollIndicator = NO;
self.delegate = self;
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)];
[self addSubview:self.upperImageView];
[self addSubview:self.middleImageView];
[self addSubview:self.downImageView];
}
return self;
}
-(void) initPlayer
{
KSYMoviePlayerController *_player;
_player = [[KSYMoviePlayerController alloc] initWithContentURL: [NSURL URLWithString:self.live.VideoAddress]];
_player.view.backgroundColor = [UIColor clearColor];
[self.player setBufferSizeMax:1];
_player.view.autoresizesSubviews = true;
[_player.view setFrame: self.view.bounds]; // player's frame must match parent's
_player.view.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
_player.shouldAutoplay = TRUE;
_player.shouldLoop = YES;
_player.scalingMode = MPMovieScalingModeAspectFit;
[_player prepareToPlay];
self.player = _player;
self.player.view.frame = CGRectMake(0, SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
self.player.shouldAutoplay = YES;
self.view.autoresizesSubviews = YES;
[self.playerScrollView addSubview:self.player.view];
[[NSNotificationCenter defaultCenter]addObserver:self
selector:@selector(handlePlayerNotify:)
name:(MPMoviePlayerFirstVideoFrameRenderedNotification)
object:nil];
}
- 当scrollview 滑动时，当整页翻过时，则将scrollview迅速复位，并完成图片替换，以及上下图的预加载。
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
[self switchPlayer:scrollView];
}
- (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 (_previousIndex == _currentIndex) {
return;
}
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
_previousIndex = _currentIndex;
NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
}
}
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 (_previousIndex == _currentIndex) {
return;
}
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
_previousIndex = _currentIndex;
NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
}
}
}
}
- (void) prepareForImageView: (UIImageView *)imageView withLive:(VideoInfoModel *)live
{
[imageView sd_setImageWithURL:[NSURL URLWithString:live.coverImageAddress]];
}
- 上述步骤完成后通知播放器重新加载视频
#pragma mark DYPlayerScrollViewDelegate
- (void)playerScrollView:(DYPlayerScrollView *)playerScrollView currentPlayerIndex:(NSInteger)index
{
NSLog(@"current index from delegate:%ld %s",(long)index,__FUNCTION__);
if (self.index == index) {
return;
} else {
[self reloadPlayerWithLive:self.dataList[index]];
self.index = index;
}
}
- (void)reloadPlayerWithLive:(VideoInfoModel *)live
{
[self.player reset:false];
[self.player.view setHidden:true];
[self.player setUrl:[NSURL URLWithString:live.VideoAddress]];
[self.player setShouldAutoplay:YES];
[self.player setBufferSizeMax:1];
[self.player setShouldLoop:YES];
self.player.view.backgroundColor = [UIColor clearColor];
[self.player prepareToPlay];
}
- 方案一总结：demo 实现效果会发现，每次视频滑动切换的时候，重新加载视频直到视频首帧出现都需要时间，这样的播放体验并不是很流畅。我们不得不思考是否有更优的实现方式。
解决方案二
-
在方案一种 我们成功的实现的视频列表滑动切换这一效果，但是视频每次重新加载直到首帧出现这个过程必定是耗时的（首帧加载速度可以通过cdn 优化，以及播放器优化），那我们是否可以尝试像方案一中图片处理的方式一样。有两个背景播放器去缓冲对应视频list 的上一个视频以及下一个视频。顺着这样的思路，我们实现了像如开篇效果演示的gif 的流畅体验。(因为方案二是基于方案一的，所以以下就简叙下思路。)
-
与方案一不同的是这里我们是用的是三个播放器，两个用作背景缓冲。
@property (nonatomic, strong) KSYMoviePlayerController *upPerPlayer, *middlePlayer, *downPlayer;
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
// 在DYPlayerScrollView init方法中分别初始化 upperImageView middleImageView downImageView
以及 upPerPlayer middlePlayer downPlayer
}
}
- 当scrollview 滑动时，当整页翻过时，则将scrollview迅速复位，除了完成图片的操作，这里还要完成播放器的操作。
- (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 (self.upPerPlayer.view.frame.origin.y == 0) {
self.upPerPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.upPerPlayer.view.frame = CGRectMake(0, self.upPerPlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
if (self.middlePlayer.view.frame.origin.y == 0) {
self.middlePlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.middlePlayer.view.frame = CGRectMake(0, self.middlePlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
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.downPlayer.view.frame.origin.y == 0) {
self.downPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 2, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.downPlayer.view.frame = CGRectMake(0, self.downPlayer.view.frame.origin.y - SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
if (self.upPerPlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
[self prepareForVideo:self.upPerPlayer withLive:_downLive];
}
if (self.middlePlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
[self prepareForVideo:self.middlePlayer withLive:_downLive];
}
if (self.downPlayer.view.frame.origin.y == SCREEN_HEIGHT * 2) {
[self prepareForVideo:self.downPlayer withLive:_downLive];
}
if (_previousIndex == _currentIndex) {
return;
}
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
_previousIndex = _currentIndex;
NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
}
}
else if (offset <= 0)
{
// slides to the upper player
scrollView.contentOffset = CGPointMake(0, self.frame.size.height);
_currentIndex--;
self.downImageView.image = self.middleImageView.image;
if (self.downPlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
self.downPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.downPlayer.view.frame = CGRectMake(0, self.downPlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
self.middleImageView.image = self.upperImageView.image;
if (self.middlePlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
self.middlePlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.middlePlayer.view.frame = CGRectMake(0, self.middlePlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
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.upPerPlayer.view.frame.origin.y == 2 * SCREEN_HEIGHT) {
self.upPerPlayer.view.frame = CGRectMake(0, SCREEN_HEIGHT * 0, SCREEN_WIDTH, SCREEN_HEIGHT);
}else{
self.upPerPlayer.view.frame = CGRectMake(0, self.upPerPlayer.view.frame.origin.y + SCREEN_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT);
}
if (self.upPerPlayer.view.frame.origin.y == 0 ) {
[self prepareForVideo:self.upPerPlayer withLive:_upperLive];
}
if (self.middlePlayer.view.frame.origin.y == 0 ) {
[self prepareForVideo:self.middlePlayer withLive:_upperLive];
}
if (self.downPlayer.view.frame.origin.y == 0 ) {
[self prepareForVideo:self.downPlayer withLive:_upperLive];
}
if (_previousIndex == _currentIndex) {
return;
}
if ([self.playerDelegate respondsToSelector:@selector(playerScrollView:currentPlayerIndex:)]) {
[self.playerDelegate playerScrollView:self currentPlayerIndex:_currentIndex];
_previousIndex = _currentIndex;
NSLog(@"current index in delegate: %ld -%s",_currentIndex,__FUNCTION__);
}
}
}
}
- 监听视频准备播放，以及第一帧出现通知，做合适的逻辑处理。
[[NSNotificationCenter defaultCenter]addObserver:self
selector:@selector(handlePlayerNotify:)
name:(MPMoviePlayerFirstVideoFrameRenderedNotification)
object:nil];
[[NSNotificationCenter defaultCenter]addObserver:self
selector:@selector(handlePlayerPreparedToPlayNotify:)
name:(MPMediaPlaybackIsPreparedToPlayDidChangeNotification)
object:nil];
- 方案二总结：从demo的运行效果来看，流畅不卡顿。这应该是现在主流的视频列表滑动播放比较好的实现方式了
网友评论