致谢:ZFPlayer的作者 任子丰
在Cell上播放视频,需要有一下几个问题需要解决:
1.划过屏幕 暂停播放
2.点击下个 cell 的视频,上一个cell的视频需要暂停
3.在视频中间有个 播放按钮
4,每个cell 都要显示第一帧的image
ZF的使用思路(xib):
1.首先在xib的cell上拖一个imageView,这个imageView用来展示 第一帧的图片(获取图片第一帧看别的笔记),并且在imageView上添加播放按钮,记住,imageView要打开用户交互
2.在播放按钮点击事件中,调用block 回调
3.在tableVIew 的 代理方法中,调用回调,在代码块中,给playerView 附上属性 包括 fatherVIew,tableVIew,indexPath 等
4,懒加载 playerVIew,并且使用单利创建
没代码,详情见 ZF的Demo ........
最新版本 使用方法 :纯代码
1.在cell 上 iamgeIVew 上添加 按钮,点击按钮回调
2.在回调 时 tableVIew delegate 里面设置回调 的 三个必须设定值
- 将自己的model 传给 zf的model
代码:
第一步:
.h
/** 播放按钮block */
@property (nonatomic, copy ) void(^playBlock)(UIButton *);
@property (nonatomic , strong) UIImageView * videoImageView;
.m
pragma mark - 视频播放按钮点击
- (void)videoPlayButtonClick:(UIButton *)sender{
NSLog(@"视频播放按钮点击");
if (self.playBlock) {
self.playBlock(sender);
}
}
第二步:
pragma mark - 懒加载
//视频播放器
- (ZFPlayerView *)playerView {
if (!_playerView) {
_playerView = [ZFPlayerView sharedPlayerView];
_playerView.delegate = self;
// 当cell播放视频由全屏变为小屏时候,不回到中间位置
_playerView.cellPlayerOnCenter = NO;
// 当cell划出屏幕的时候停止播放
_playerView.stopPlayWhileCellNotVisable = YES;
//(可选设置)可以设置视频的填充模式,默认为(等比例填充,直到一个维度到达区域边界)
// _playerView.playerLayerGravity = ZFPlayerLayerGravityResizeAspect;
// 静音
// _playerView.mute = YES;
}
return _playerView;
}
pragma mark - TableView 代理 数据源
-
(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
RSMomentsTableViewCell * momensfCell = [tableView dequeueReusableCellWithIdentifier:momentsCellIdentifier];
RSMomentsModel * model = _dataSource[indexPath.section];
momensfCell.momentsModel = model;__block NSIndexPath *weakIndexPath = indexPath;
__block RSMomentsTableViewCell *weakCell = momensfCell;
JKWeakSelf// 点击播放的回调
momensfCell.playBlock = ^(UIButton *btn){ZFPlayerModel *playerModel = [[ZFPlayerModel alloc] init]; playerModel.videoURL = [NSURL URLWithString:model.videoURL]; playerModel.placeholderImageURLString = model.videoURL; playerModel.scrollView = tableView; playerModel.indexPath = weakIndexPath; // player的父视图tag playerModel.fatherViewTag = weakCell.videoImageView.tag;
// playerModel.fatherView = weakCell.videoImageView;
// 设置播放控制层和model
[weakSelf.playerView playerControlView:nil playerModel:playerModel];
// 下载功能
weakSelf.playerView.hasDownload = NO;
// 自动播放
[weakSelf.playerView autoPlayTheVideo];
};
return momensfCell;
}
第三步:界面消失重置播放器
pragma mark - 页面消失出现
-
(void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.playerView resetPlayer];
}
注意?。?!
- 如果 出现 有声音没有视频 的情况 说明 你cell 上的控件 加在了cell 上,应该 加在 cell.contentView上
2.如果放在 cell 上,应该 必须设置他的三个属性 :
playerModel.scrollView = tableView;
playerModel.indexPath = weakIndexPath;
playerModel.fatherViewTag = weakCell.videoImageView.tag;