All Products
Search
Document Center

Short video list player

Last Updated: Sep 06, 2019

Overview

Effect example

Final effect

Key implementation on Android

1. Create a video list player and set required parameters

  1. private AliListPlayer mVideoListPlayer;
  2. ...
  3. // Required. Create a video list player.
  4. mVideoListPlayer = AliPlayerFactory.createAliListPlayer(mContext);
  5. // Enable hard decoding.
  6. mVideoListPlayer.enableHardwareDecoder(true);
  7. // Set player parameters.
  8. PlayerConfig config = mVideoListPlayer.getConfig();
  9. // Clear video frames after the video playback stops. We recommend that you add this configuration to avoid residual frames.
  10. config.mClearFrameWhenStop = true;
  11. mVideoListPlayer.setConfig(config);
  12. // Enable loop playback. Generally, short videos are played in loop playback mode.
  13. mVideoListPlayer.setLoop(true);
  14. // Enable autoplay.
  15. mVideoListPlayer.setAutoPlay(true);
  16. // Specify the number of short videos to be preloaded. This example preloads three videos: the video that is currently being played, and the two videos right before and after the current video in the list.
  17. mVideoListPlayer.setPreloadCount(1);

2. Add multiple video sources

The short video list player supports playing videos from specified URLs and videos with specified video IDs (VIDs) from ApsaraVideo for VOD. Note that Security Token Service (STS) needs to be used to play videos from ApsaraVideo for VOD.

  1. // Add a video sourced from ApsaraVideo for VOD.
  2. mVideoListPlayer.addVid("VID of the video from ApsaraVideo for VOD", "Unique ID of the video");
  3. // Add a video sourced from a specified URL.
  4. mVideoListPlayer.addUrl("URL of the video", "Unique ID of the video");

The short video list player distinguishes videos based on their unique ID. The unique ID can be a custom string, for example, a universally unique identifier (UUID). An unexpected video may be played if you add video sources with the same unique ID. Therefore, you must ensure that the video sources added to the player have unique IDs.

3. Play videos

The short video list player provides the following methods for you to locate and play videos: moveTo, moveToPrev, and moveToNext.

  1. // Locate a video and play it.
  2. mVideoListPlayer.moveTo("Unique ID of the video", STS token) // Use STS to play the video with the specified VID from ApsaraVideo for VOD.
  3. mVideoListPlayer.moveTo("Unique ID of the video") // Play the video from the specified URL.
  4. // Play the previous video in the list.
  5. mVideoListPlayer.moveToPrev("Unique ID of the video", STS token) // Use STS to play the video with the specified VID from ApsaraVideo for VOD.
  6. mVideoListPlayer.moveToPrev("Unique ID of the video") // Play the video from the specified URL.
  7. // Play the next video in the list.
  8. mVideoListPlayer.moveToNext("Unique ID of the video", STS token) // Use STS to play the video with the specified VID from ApsaraVideo for VOD.
  9. mVideoListPlayer.moveToNext("Unique ID of the video") // Play the video from the specified URL.

4. Set the TextureView object for the player

Most video list players use the TextureView object to avoid black screen exceptions when the player is switched back to the foreground from the background. This optimizes the user experience during video playback.

4.1 Configure basic settings of the TextureView object

  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. // Cache the SurfaceTexture object so that it can be reused when the player is switched back to the foreground from the background.
  10. mSurfaceTexture = surfaceTexture;
  11. mSurface = new Surface(surface);
  12. // Set the playback surface.
  13. mVideoListPlayer.setSurface(mSurface);
  14. }
  15. @Override
  16. public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
  17. // Redraw and refresh the UI immediately after the playback screen size changes.
  18. mVideoListPlayer.redraw();
  19. }
  20. @Override
  21. public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
  22. // Ensure that the return value is false. If the return value is not false, the system releases the SurfaceTexture object.
  23. return false;
  24. }
  25. @Override
  26. public void onSurfaceTextureUpdated(SurfaceTexture surface) {
  27. }
  28. });

4.2 Apply the TextureView object upon switchback to the foreground from the background

Call the onResume() method to apply the TextureView object when the player is switched back to the foreground from the background.

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

5. Hide the thumbnail

Generally, the player displays the thumbnails of videos to be played in the list. When the player starts to play a video, it hides the video thumbnail and displays the video.

  1. mVideoListPlayer.setOnRenderingStartListener(new IPlayer.OnRenderingStartListener() {
  2. @Override
  3. public void onRenderingStart() {
  4. // The player starts to render the first frame of the video. At this time, the player hides the thumbnail.
  5. }
  6. });

6. Release the player

Exit the player. You need to release the player after use. Otherwise, a memory leak may occur.

  1. // Release the surface.
  2. mVideoListPlayer.setSurface(null);
  3. // If the player uses the TextureView object in step 4, you need to release the cached SurfaceTexture object.
  4. if (mSurface != null) {
  5. mSurface.release();
  6. }
  7. if (mSurfaceTexture != null) {
  8. mSurfaceTexture.release();
  9. }
  10. // Release the player.
  11. mVideoListPlayer.release();

You can call other player methods as required. For more information, see the feature documentation or SDK documentation.

Key implementation on iOS

1. Create a video list player and set required parameters

  1. // Required. Create a video list player.
  2. self.listPlayer = [[AliListPlayer alloc]init];
  3. // Enable hard decoding.
  4. self.listPlayer.enableHardwareDecoder = YES;
  5. // Enable loop playback.
  6. self.listPlayer.loop = YES;
  7. // Enable autoplay.
  8. self.listPlayer.autoPlay = YES;
  9. // Specify the rendering mode.
  10. self.listPlayer.scalingMode = AVP_SCALINGMODE_SCALEASPECTFIT;
  11. // Specify the delegate.
  12. self.listPlayer.delegate = self;
  13. // Specify the resolution of the short videos to be preloaded.
  14. self.listPlayer.stsPreloadDefinition = @"FD";
  15. // Set the UI view.
  16. self.listPlayer.playerView = self.simplePlayScrollView.playView;
  17. // Specify the number of short videos to be preloaded. This example preloads three videos: the video that is currently being played, and the two videos right before and after the current video in the list.
  18. mVideoListPlayer.setPreloadCount(1);

2. Add multiple video sources

The short video list player supports playing videos from specified URLs and videos with specified VIDs from ApsaraVideo for VOD. Note that STS needs to be used to play videos from ApsaraVideo for VOD.

  1. // Add a video sourced from ApsaraVideo for VOD.
  2. [self.listPlayer addVidSource:VID of the video from ApsaraVideo for VOD uid:"Unique ID of the video"];
  3. // Add a video sourced from a specified URL.
  4. [self.listPlayer addUrlSource:"URL of the video" uid: "Unique ID of the video"];

The short video list player distinguishes videos based on their unique ID. An unexpected video may be played if you add video sources with the same unique ID. Therefore, you must ensure that the video sources added to the player have unique IDs.

3. Play videos

The short video list player provides the following methods for you to locate and play videos: moveTo, moveToPrev, and moveToNext.

  1. // Locate a video and play it.
  2. [self.listPlayer moveTo:"Unique ID of the video"]; // Play the video from the specified URL.
  3. [self.listPlayer moveTo:"Unique ID of the video" accId:accId accKey:accKey token:token region:region]; // Use STS to play the video with the specified VID from ApsaraVideo for VOD.
  4. // Play the previous video in the list.
  5. [self.listPlayer moveToPrev:"Unique ID of the video"]; // Play the video from the specified URL.
  6. [self.listPlayer moveToPrev:"Unique ID of the video" accId:accId accKey:accKey token:token region:region]; // Use STS to play the video with the specified VID from ApsaraVideo for VOD.
  7. // Play the next video in the list.
  8. [self.listPlayer moveToNext:"Unique ID of the video"]; // Play the video from the specified URL.
  9. [self.listPlayer moveToNext:"Unique ID of the video" accId:accId accKey:accKey token:token region:region]; // Use STS to play the video with the specified VID from ApsaraVideo for VOD.

4. Scroll the playlist

This section describes some playback control operations on the screen.

4.1 Tap to pause or resume playback

Tap the screen to pause or resume the playback.

  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. // Pause the video if the video is being played.
  9. [self.listPlayer pause];
  10. }else if (self.playerStatus == AVPStatusPaused) {
  11. // Play the video if the video is paused.
  12. [self.listPlayer start];
  13. }
  14. }

4.2 Scroll the playlist

If you scroll the playlist so fast that you skip the nearest video (the previous one or the next one), the moveTo method is called to locate and play the specified video.
The callback for playlist scrolling determines the scrolling target.

  1. - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
  2. CGFloat indexFloat = scrollView.contentOffset.y/self.frame.size.height;
  3. NSInteger index = (NSInteger)indexFloat;
  4. .......
  5. // Scroll down to the next video.
  6. if (index - self.currentIndex == 1) {
  7. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollView:motoNextAtIndex:)]) {
  8. [self.delegate AVPSimplePlayScrollView:self motoNextAtIndex:index];
  9. }
  10. }
  11. // Scroll up to the previous video.
  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. // Scroll the playlist up or down by more than one video.
  18. else {
  19. if ([self.delegate respondsToSelector:@selector(AVPSimplePlayScrollView:scrollViewDidEndDeceleratingAtIndex:)]) {
  20. [self.delegate AVPSimplePlayScrollView:self scrollViewDidEndDeceleratingAtIndex:index];
  21. }
  22. }
  23. }
  24. /**
  25. Scroll the playlist up or down by more than one video.
  26. @param simplePlayScrollView simplePlayScrollView
  27. @param index The count from the current video to the scrolling target in the upward or downward direction.
  28. */
  29. - (void)AVPSimplePlayScrollView:(AVPSimplePlayScrollView *)simplePlayScrollView scrollViewDidEndDeceleratingAtIndex:(NSInteger)index {
  30. // Locate the scrolling target.
  31. AVPDemoResponseVideoListModel *model = [self findModelFromIndex:index];
  32. // Call the moveTo method to scroll to the current video.
  33. [self moveToCurrentModel];
  34. }

5. Hide the thumbnail

Generally, the player displays the thumbnails of videos to be played in the list. When the player starts to play a video, it hides the video thumbnail and displays the video.

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

6. Release the player

Exit the player. You need to release the player after use. Otherwise, a memory leak may occur.

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

You can call other player methods as required. For more information, see the feature documentation or SDK documentation.