全部产品
云市场

短视频列表播放器

更新时间:2019-07-15 16:14:38

简介

效果示例

最终效果

Android 关键实现

1. 创建列表播放器,并设置相关参数

  1. private AliListPlayer mVideoListPlayer;
  2. ……
  3. //创建播放器(必须)
  4. mVideoListPlayer = AliPlayerFactory.createAliListPlayer(mContext);
  5. //开启硬解
  6. mVideoListPlayer.enableHardwareDecoder(true);
  7. //设置播放器参数
  8. PlayerConfig config = mVideoListPlayer.getConfig();
  9. //停止之后清空画面。防止画面残留(建议设置)
  10. config.mClearFrameWhenStop = true;
  11. mVideoListPlayer.setConfig(config);
  12. //开启循环播放。短视频一般都是循环播放的
  13. mVideoListPlayer.setLoop(true);
  14. //开启自动播放。
  15. mVideoListPlayer.setAutoPlay(true);
  16. //设置预加载个数。此时会加载3个视频。当前播放的,和上下1个。
  17. mVideoListPlayer.setPreloadCount(1);

2.添加多个播放数据源

列表播放器支持URL、点播Vid的数据源(STS方式)。

  1. //使用点播服务的视频源
  2. mVideoListPlayer.addVid("点播视频vid", "视频唯一标识");
  3. //或者直接使用URL
  4. mVideoListPlayer.addUrl("视频URL", "视频唯一标识");

在列表播放器内部,视频是通过视频唯一标识区分的。如果添加的视频源的唯一标识一样的话,会导致播放错乱。所以:确保每次添加数据源的视频唯一标识都不一样

3. 开始播放某个视频

播放器提供了以下接口,实现基本的定位播放功能:moveTomoveToPrevmoveToNext

  1. //直接跳转到某个视频播放
  2. mVideoListPlayer.moveTo("视频唯一标识"STS信息) //点播Vid源(STS方式)
  3. mVideoListPlayer.moveTo("视频唯一标识") //URL源
  4. //播放上一个视频
  5. mVideoListPlayer.moveToPrev("视频唯一标识"STS信息) //点播Vid源(STS方式)
  6. mVideoListPlayer.moveToPrev("视频唯一标识") //URL源
  7. //播放下一个视频
  8. mVideoListPlayer.moveToNext("视频唯一标识"STS信息) //点播Vid源(STS方式)
  9. mVideoListPlayer.moveToNext("视频唯一标识") //URL源

4. TextureView与播放器的配合使用

多数列表播放使用了TextureView。正确的使用,可以避免退后台返回黑屏的问题,优化播放体验。

4.1TextureView的基本设置

  1. TextureView mTextureView = null;
  2. SurfaceTexture mSurfaceTexture = null;
  3. Surface mSurface = null;
  4. ……
  5. mTextureView = findViewById(R.id.textureView);
  6. mTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
  7. @Override
  8. public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture, int width, int height) {
  9. //缓存SurfaceTexture,在退后台再进时使用
  10. mSurfaceTexture = surfaceTexture;
  11. mSurface = new Surface(surface);
  12. //设置播放的surface
  13. mVideoListPlayer.setSurface(mSurface);
  14. //重绘界面,立即刷新界面
  15. mVideoListPlayer.redraw();
  16. }
  17. @Override
  18. public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
  19. //画面大小变化的时候重绘界面,立即刷新界面
  20. mVideoListPlayer.redraw();
  21. }
  22. @Override
  23. public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
  24. //这里一定要return false。这样SurfaceTexture不会被系统销毁
  25. return false;
  26. }
  27. @Override
  28. public void onSurfaceTextureUpdated(SurfaceTexture surface) {
  29. }
  30. });

4.2 退后台重进界面

在onResume中处理退后台再进的情况

  1. public void onResume() {
  2. ……
  3. if (mVideoListPlayer != null && mSurface != null) {
  4. mVideoListPlayer.setSurface(mSurface);
  5. mVideoListPlayer.redraw();
  6. }
  7. ……
  8. }

5. 封面的隐藏时机

列表播放时一般都会有个封面,视频播起来之后,把封面隐藏,显示视频。

  1. mVideoListPlayer.setOnRenderingStartListener(new IPlayer.OnRenderingStartListener() {
  2. @Override
  3. public void onRenderingStart() {
  4. //视频第一帧开始渲染。此时可以隐藏封面
  5. }
  6. });

6. 销毁播放器

退出界面,使用完播放器,需要释放播放器。否则会有内存泄漏。

  1. //释放surface
  2. mVideoListPlayer.setSurface(null);
  3. //如果按照第4步使用了TextureView,那么还需要释放缓存的surface
  4. if (mSurface != null) {
  5. mSurface.release();
  6. }
  7. if (mSurfaceTexture != null) {
  8. mSurfaceTexture.release();
  9. }
  10. //释放播放器
  11. mVideoListPlayer.release();

播放器其他的接口可根据实际需求调用。请参考功能文档或者接口文档,不再赘述。

iOS关键实现

1. 创建列表播放器,并设置相关参数

  1. //创建播放器(必须)
  2. self.listPlayer = [[AliListPlayer alloc]init];
  3. //开启硬解
  4. self.listPlayer.enableHardwareDecoder = YES;
  5. //循环播放
  6. self.listPlayer.loop = YES;
  7. //自动播放
  8. self.listPlayer.autoPlay = YES;
  9. //渲染模式
  10. self.listPlayer.scalingMode = AVP_SCALINGMODE_SCALEASPECTFIT;
  11. //代理设置
  12. self.listPlayer.delegate = self;
  13. //预加载的清晰度
  14. self.listPlayer.stsPreloadDefinition = @"FD";
  15. //显示view
  16. self.listPlayer.playerView = self.simplePlayScrollView.playView;
  17. //设置预加载个数。此时会加载3个视频。当前播放的,和上下1个。
  18. mVideoListPlayer.setPreloadCount(1);

2.添加多个播放数据源

列表播放器支持URL、点播Vid的数据源(STS方式)。

  1. //使用点播服务的视频源
  2. [self.listPlayer addVidSource:点播视频vid uid:"视频唯一标识"];
  3. //或者直接使用URL
  4. [self.listPlayer addUrlSource:"视频URL" uid: "视频唯一标识"];

在列表播放器内部,视频是通过视频唯一标识区分的。如果添加的视频源的唯一标识一样的话,会导致播放错乱。所以:确保每次添加数据源的视频唯一标识都不一样

3. 开始播放某个视频

播放器提供了以下接口,实现基本的定位播放功能:moveTomoveToPrevmoveToNext

  1. //直接跳转到某个视频播放
  2. [self.listPlayer moveTo:"视频唯一标识"]; //URL源
  3. [self.listPlayer moveTo:"视频唯一标识" accId:accId accKey:accKey token:token region:region]; //点播Vid源(STS方式)
  4. //播放上一个视频
  5. [self.listPlayer moveToPrev:"视频唯一标识"]; //URL源
  6. [self.listPlayer moveToPrev:"视频唯一标识" accId:accId accKey:accKey token:token region:region]; //点播Vid源(STS方式)
  7. //播放下一个视频
  8. [self.listPlayer moveToNext:"视频唯一标识"]; //URL源
  9. [self.listPlayer moveToNext:"视频唯一标识" accId:accId accKey:accKey token:token region:region]; //点播Vid源(STS方式)

4. 滑动控制操作

下面列举一些滑动播放控制操作

4.1点击暂停和播放

在屏幕上点击暂停和播放

  1. - (void)tap {
  2. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollViewTapGestureAction:)]) {
  3. [self.delegate AVPSimplePlayScrollViewTapGestureAction:self];
  4. }
  5. }
  6. - (void)AVPSimplePlayScrollViewTapGestureAction:(AVPSimplePlayScrollView *)simplePlayScrollView {
  7. if (self.playerStatus == AVPStatusStarted) {
  8. //如果是播放,则暂停
  9. [self.listPlayer pause];
  10. }else if (self.playerStatus == AVPStatusPaused) {
  11. //如果是暂停,则播放
  12. [self.listPlayer start];
  13. }
  14. }

4.2滑动控制

如果列表滑动速度较快,也就是滑动的位置超过一个,则直接调用moveTo接口列表滑动后的回调中去判定:

  1. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
  2. CGFloat indexFloat = scrollView.contentOffset.y/self.frame.size.height;
  3. NSInteger index = (NSInteger)indexFloat;
  4. .......
  5. //往下滑动一格
  6. if (index - self.currentIndex == 1) {
  7. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollView:motoNextAtIndex:)]) {
  8. [self.delegate AVPSimplePlayScrollView:self motoNextAtIndex:index];
  9. }
  10. }
  11. //往上滑动一格
  12. else if (self.currentIndex - index == 1){
  13. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollView:motoPreAtIndex:)]) {
  14. [self.delegate AVPSimplePlayScrollView:self motoPreAtIndex:index];
  15. }
  16. }
  17. //滑动多格
  18. else {
  19. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollView:scrollViewDidEndDeceleratingAtIndex:)]) {
  20. [self.delegate AVPSimplePlayScrollView:self scrollViewDidEndDeceleratingAtIndex:index];
  21. }
  22. }
  23. }
  24. /**
  25. 滚动事件,移动位置超过一个
  26. @param simplePlayScrollView simplePlayScrollView
  27. @param index 移动到第几个
  28. */
  29. - (void)AVPSimplePlayScrollView:(AVPSimplePlayScrollView *)simplePlayScrollView scrollViewDidEndDeceleratingAtIndex:(NSInteger)index {
  30. //找到第几个
  31. AVPDemoResponseVideoListModel *model = [self findModelFromIndex:index];
  32. //MoveTo到当前
  33. [self moveToCurrentModel];
  34. }

5. 封面的隐藏时机

列表播放时一般都会有个封面,视频播起来之后,把封面隐藏,显示视频。

  1. -(void)onPlayerEvent:(AliPlayer*)player eventType:(AVPEventType)eventType {
  2. switch (eventType) {
  3. case AVPEventPrepareDone: {
  4. }
  5. break;
  6. case AVPEventFirstRenderedStart: {
  7. //隐藏封面图
  8. [self.simplePlayScrollView showPlayView];
  9. }
  10. break;
  11. default:
  12. break;
  13. }
  14. }

6. 销毁播放器

退出界面,使用完播放器,需要释放播放器。否则会有内存泄漏。

  1. [self.listPlayer stop];
  2. [self.listPlayer destroy];
  3. self.listPlayer = nil;

播放器其他的接口可根据实际需求调用。请参考功能文档或者接口文档,不再赘述。