ApsaraVideo VOD:Basic features

The basic features of ApsaraVideo Player SDK for Web are enabled by using attributes or methods.

The following sample code provides an example on how to call methods:

• HTML5 player

  Call the following method in the callback of the function 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 play a video from a specified point in time. Sample code:

// time specifies the specified 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 such as rotation and mirroring. Only the HTML5 player supports this feature.

Call the setRotate operation to rotate an image based on the specified angle. 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>)
// Obtain the rotation angle. 
player.getRotate()

Call setImage to configure the mirroring mode. Supported modes: horizontal mirroring and vertical mirroring. Sample code:

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

ApsaraVideo Player SDK for Web provides the videoHeight and videoWidth attributes for you to specify the height and width of a video. In most cases, the height and width of a video are smaller than those of the container. This prevents the video from overflowing 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.

Call getCurrentTime to obtain the current playback progress. Sample code:

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

Call getDuration to obtain the total duration of the video. You can obtain the duration only after the video is loaded or after the play event occurs. Sample code:

player.getDuration()

Call getStatus to obtain the playback status. Return values:

• init: The player is being initialized.

• ready

• loading: The player is loading data.

• play

• pause

• playing

• waiting

• error

• ended

Sample code:

player.getStatus()

You can adjust the volume or mute the video.

Call the setVolume operation to adjust the volume. You can also obtain the current volume. Sample code:

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

Call the mute method to mute the video during playback. Sample code:

// Mute the video.
player.mute();
// Unmute the video.
player.unMute();

You can specify the playback speed only for the HTML5 player. If you use the default user interface (UI) of the ApsaraVideo Player SDK for Web, you can use the built-in playback speed feature to adjust the playback speed when you watch the video. If you use a custom UI, you can call the setSpeed operation to adjust 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 current speed. 
player.setSpeed(2)

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

• If you use VID and PlayAuth for playback, no additional settings are required. ApsaraVideo Player SDK for Web obtains the list of definitions from ApsaraVideo VOD. You can click Settings on the playback page to view the definition list.

  Note

  If you use VID and PlayAuth for playback, you can specify the format attribute to determine whether to play media files in the MP4 or MP3 format for the HTML5 player. By default, media files in the MP4 format are played.

• If you use URL-based playback, you must configure the key-value pairs in the source attribute to specify the URLs of the streams in multiple definitions. The key-value pairs are in the JSON format. After the settings take effect, you 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 attribute 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:

// The following example shows how to configure the high definition and ultra-high definition URLs. 
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

ApsaraVideo Player SDK for Web also allows you to specify the qualitySort attribute to list the 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.