Apsara Video SDK:Basic features

ApsaraVideo Player SDK for web provides parameters and methods to implement the basic features.

The following sample code provides examples on how to call methods:

• HTML5 player

  Call the following method in the callback of the method that is used to create a player. Sample code:

  // HTML5 player
   var player = new Aliplayer({},function(player) {
   player.play();
   });

• // Flash player

  Call the following method after the ready event occurs or in the ready callback for creating a player. Sample code:

  // Flash player
   player.on('ready',function(e) {
   player.play();
   });

You can call the seek method to skip to a point in time and start the playback. Sample code:

// time: the point in time. Unit: seconds. 
player.seek(time)

You can call the pause method to pause the playback. Sample code:

player.pause()

ApsaraVideo Player SDK for web allows you to configure display settings for playback in the HTML5 player. For example, you can specify how video images are rotated or mirrored.

You can call the setRotate method to specify a rotation angle for video images. You can also query the rotation angle. Sample code:

// Specify the rotation angle. A positive value of Angle specifies a clockwise rotation. A negative value of Angle specifies an anticlockwise rotation. For example, player.setRotate(180) specifies a clockwise rotation of 180 degrees. 
player.setRotate(<Angle>)
// Query the rotation angle. 
player.getRotate()

You can call the setImage method to specify a mirroring mode. Horizontal mirroring and vertical mirroring are supported. Sample code:

// Horizontal mirroring.
player.setImage('horizon')
// Vertical mirroring.
player.setImage('vertical')

You can use the videoHeight and videoWidth parameters to set the height and width of a video. Typically, the height and width of a video are smaller than those of the container. This prevents video overflow from the parent container during rotation and mirroring. Sample code:

 width: '100%', // The width of the container.
 height: '100%', // The height of the container.
 videoHeight:"200px", // The height of the video.

You can call the getCurrentTime method to query the current playback position. Sample code:

// The returned time is measured in seconds. 
player.getCurrentTime()

You can query the total duration of a video. You can query the video duration only after the video is loaded. For example, you can query the video duration after the play event occurs. Call the getDuration method to query the total duration of a video. Sample code:

player.getDuration()

You can query the player status by calling the getStatus method. Return values:

• init: The player is being initialized.

• ready: The player is ready.

• loading: The video is loading.

• play: The video starts to play.

• pause: The video is paused.

• playing: The video is playing.

• waiting: The video is waiting for buffering.

• error: An error occurs.

• ended: The playback ends.

Sample code:

player.getStatus()

You can change the volume of a video or mute the video.

You can call the setVolume method to change the volume. You can also query the current volume. Sample code:

// Set the volume to a real number from 0 to 1. 
player.setVolume(0)
// Query the current volume. 
player.getVolume()

You can call the mute method to mute the video during playback. Sample code:

player.mute()

You can specify the playback speed only for the HTML5 player. The default UI of ApsaraVideo Player SDK for web provides the playback speed feature. Users can select a playback speed on the UI. If you use a custom UI, you can call the setSpeed method to specify the playback speed.

Sample code:

// Specify the playback speed. The following sample code provides an example on how to set the playback speed to twice the normal speed: 
player.setSpeed(2)

You can configure the URLs of streams in multiple definitions for multi-definition playback.

• If you use video ID and playback credential-based playback, no additional settings are required. ApsaraVideo Player SDK for web automatically obtains video definitions from ApsaraVideo VOD. Users can click Settings on the playback page to view the definition list.

  Note

  If you use video ID and playback credential-based playback, you can specify the format parameter to determine whether to play media files in the MP4 or MP3 format for the HTML5 player. By default, media files are played in the MP4 format.

• If you use URL-based playback, you must configure key-value pairs in the source parameter to specify the URLs of streams in multiple definitions. The key-value pairs are in the JSON format. After the settings take effect, users can click Settings on the playback page to view the definition list.

In URL-based playback mode, the following key-value pairs in the source parameter are supported:

"OD":"<Original quality URL>"
 "FD":"<Low definition URL>"
 "LD":"<Standard definition URL>"
 "SD":"<High definition URL>"
 "HD":"<Ultra-high definition URL>"
 "2K": "<2K URL>"
 "4K": "<4K URL>"

The following sample code provides an example on how to configure definitions in URL-based playback mode:

// Configure the URLs of streams in ultra-high definition and high definition. 
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

ApsaraVideo Player SDK for web allows you to use the qualitySort parameter to specify whether to list definitions in ascending or descending order.

• A value of desc specifies the descending order from the highest definition to the lowest definition.

• A value of asc specifies the ascending order from the lowest definition to the highest definition.