All Products
Search
Document Center

ApsaraVideo VOD:Basic features

Last Updated:Oct 09, 2023

When you use ApsaraVideo Player SDK for Web, the settings of commonly used features may vary with different players, playback methods, or browser environments. This topic describes how to configure the basic features of ApsaraVideo Player SDK for Web.

Common settings

If you want to use the HTML5 player and Flash player to play Flash Video (FLV) videos and HTTP Live Streaming (HLS) videos, you must configure cross-origin resource sharing (CORS). For more information, see Configure CORS.

  • If you do not configure CORS when you use the HTML5 player, the following error message is returned during playback:

    No 'Access-Control-Allow-Origin' header is present on the requested resource.

  • If you do not configure CORS when you use the Flash player, the following error message is returned during playback:Flash跨域报错

Note

After the full-screen playback starts, you can configure input to set absolute positioning to enable the soft keyboard.

Call methods

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

Note

For more information, see API operations.

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();
     });

Manage media playback

ApsaraVideo Player SDK for Web allows you to play videos from a specified point in time and pause playback. You can call the same method for the HTML5 player and Flash player.

Play a video from a specific point in time

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)

Pause playback

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

player.pause()
Note

To display the large play button, you must set this parameter to true. Example: player.pause(true).

Specify the display mode

ApsaraVideo Player SDK for Web allows you to configure display settings such as rotation and mirroring. Only the HTML5 player supports this feature.

Note
  • PC and iOS browsers support the display settings.

  • Chrome and Firefox for Android support the display settings.

  • WeChat and most other browsers use the built-in player for playback. Therefore, the display settings are not supported.

Specify the rotation angle

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()

Specify the mirroring mode

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.

Obtain playback information

ApsaraVideo Player SDK for Web allows you to obtain the current playback progress and playback duration.

Obtain the playback progress

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

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

Obtain the playback duration

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()

Obtain the playback status

Call getStatus to obtain the playback status. Return values:

  • init: The player is being initialized.

  • ready: The player is ready.

  • loading: The player is loading data.

  • play: The player starts playing.

  • pause: The video in the player is paused.

  • playing: The video in the player is playing.

  • waiting: The video in the player is waiting for buffering.

  • error: An error occurs on the player.

  • ended: The playback ends.

Sample code:

player.getStatus()

Specify the volume

You can adjust the volume or mute the video.

Note

The video.volume property is read-only in iOS and specific Android systems. Therefore, the getVolume and setVolume methods provided by ApsaraVideo Player SDK for Web are invalid for iOS and specific Android systems.

Adjust the volume

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()

Configure the mute mode

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

player.mute()

Specify the playback speed

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.

Note

For more information about how to disable the playback speed settings, see the setSpeed section of the API operations topic.

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)

Multi-definition playback

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.

Note

If you want to change how the definition list is displayed, you can use the definition component. For more information about the sample code, see Functions.

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.

Note
  • The player retains the definition that you specify. The next time you play the video, the definition that you specified last time is used. If you did not specify a definition the last time you played the video, a low definition is used for playback.

  • If the video fails to be played in the specified definition, the player automatically switches to the next lower definition and displays a message. Only the HTML5 player supports definition switch.

Enable loop playback

ApsaraVideo Player SDK for Web allows you to specify the rePlay attribute or listen for the ended event for loop playback.

Sample code used to specify the rePlay attribute

rePlay:true

Sample code used to listen for the ended event

player.on('ended',function(){
   player.replay()
})

References