All Products
Search
Document Center

Implement full-screen instant loading by using ApsaraVideo Player

Last Updated: Jul 11, 2019

Solution description

The startup loading time is one of the indicators that have the greatest impact on users' experience of playing a short video. Generally, a short video ranges only from dozens of seconds to a few minutes in length. For a 10-second video, it is no doubt that a long loading time of up to 5 to 6 seconds adversely affects user experience. Therefore, at the beginning of designing a player product, developers set the startup loading time to about 1 second (within 1 second for most players). Such a loading speed is called "instant loading" in the industry. However, to achieve instant loading, developers need to optimize the playback process and configure numerous solutions for players. ApsaraVideo Player has been able to instantly play a short video within 1 second after users send a playback request. This topic does not involve technical details of ApsaraVideo Player. It focuses on how to use the following methods to implement the full-screen instant loading solution of ApsaraVideo Player: consistency between the thumbnail and the first playback frame, video preload, and play-and-cache. With this solution, the average startup loading time can be shortened to about 300 milliseconds in a Wi-Fi environment.

Thumbnail solution

Solution 1: Before a video is played, its thumbnail is displayed first. If the thumbnail and the first playback frame are the same, users do not perceive the existence of the thumbnail. This creates the illusion that the video is instantly played. Solution 2: Only thumbnails are requested when a user quickly scrolls through the video playlist. Solution 3: When a user scrolls to half of the next video, the video thumbnail that is downloaded is displayed.

Video preload solution

Solution 1: Create multiple players.

  • ApsaraVideo Player does not support progressive download. To implement the preload feature, you can create multiple players.

Solution 2: Preload resources.

  • Use an idle player to preload videos to be played.
  • The AliyunVodPlayer.prepareAsync() method is used for Android devices.
  • The AliyunVodPlayer player class is used for iOS devices, and the method name is as follows:
/*
 *Function: On-demand AccessKey ID, AccessKey Secret, and SecurityToken: used for playback and download requests. They are obtained by using the API or SDK provided by STS after RAM authorization is enabled.
 *Remarks: For more information about the parameters, see https://help.aliyun.com/document_detail/28788.html?spm=5176.doc28787.6.706.2G5SLS.
 *ApsaraVideo Player version: V3.2.0
 */
- (void)prepareWithVid:(NSString *)vid
           accessKeyId:(NSString *)accessKeyId
       accessKeySecret:(NSString *)accessKeySecret
         securityToken:(NSString *)securityToken;

Play-and-cache feature

You can use the play-and-cache feature to cache a video file locally when the video is being played. When you play the video again, ApsaraVideo Player uses the locally cached file for playback without requesting for the video online.

You can set the download path, maximum download size (in MB), and maximum allowed download duration (in seconds) for a single video.

// Sample code for Android
 // Set the cache directory after creating a player class and before calling the prepare() method.
  String sdDir = Environment.getExternalStorageDirectory().getAbsolutePath() + "/test_save_cache";
   aliyunVodPlayer.setPlayingCache(true, sdDir, 60 * 60 /*The maximum length of a single video, in seconds.*/, 300 /*The total size of files in the cache directory, in MB.*/);
// For example, if maxSize is set to 500 MB and the size of files in the cache directory exceeds 500 MB, the system overwrites the earliest cached files. If maxDuration is set to 300 seconds and the length of a video exceeds 300 seconds, the excess part of the video is not cached.

// Sample code for iOS
// Set the cache directory.
NSArray *pathArray = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *docDir = [pathArray objectAtIndex:0];
// Set the cache directory after creating a player class and before calling the prepare() method. For example, if maxSize is set to 500 MB and the size of files in the cache directory exceeds 500 MB, the system overwrites the earliest cached files. If maxDuration is set to 300 seconds and the length of a video exceeds 300 seconds, the excess part of the video is not cached.
[self.aliPlayer setPlayingCache:YES saveDir:docDir maxSize:500 maxDuration:300];

Restrictions:

  1. The play-and-cache feature only caches videos that are fully played. If you execute a seek action during playback, the video cannot be cached. This feature is applicable to scenarios where you need to loop the playback of a short video.
  2. The play-and-cache feature must be called before the prepare() method.

CDN-based preload

  1. Log on to the ApsaraVideo for VOD console and choose Refresh and Push in the left-side navigation pane. Set Operation to Push and enter the URL of the video to be preloaded.

undefined

  1. Enable the preload solution. Using the CDN-based preload feature comes with a certain cost. You can preload videos to Alibaba Cloud CDN nodes based on the video popularity.