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:An error about CORS for the Flash player

When you play a video in WeChat or QQ Browser on an Android device, the browser forces videos to be played in full-screen mode. You cannot modify this default configuration of the browser. However, you can enable the immersive mode to prevent the Dom element from being overwritten. This way, autoplay in full-screen mode is prevented. For more information, see How do I enable the immersive mode for the HTML5 player?

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 methods in the callback of the function that is used to create the player. Sample code:
    // HTML5 player
     var player = new Aliplayer({},function(player) {
        player.play();
     });
  • Flash player
    Call the following methods after the ready event occurs or in the ready callback for creating the player. Sample code:
    // Flash player
     player.on('ready',function(e) {
        player.play();
     });

Manage 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 specified point in time

Call seek to skip to the specified point in time and start playing. Sample code:
// time specifies the specified point in time. Unit: seconds. 
player.seek(time)

Pause playback

Call pause to pause playback. Sample code:
player.pause()

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 or most other browsers use the built-in player for playback. Therefore, the display settings are not supported.

Specify the rotation angle

Call setRotate 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 set 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 the playback information

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

Obtain the current playback progress

Call getCurrentTime to obtain the current playback time. Sample code:
// Unit: 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.
Notice

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

Mute the video

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 setSpeed to adjust the playback speed.
Note For more information about how to disable the playback speed settings, see setSpeed in API operations.
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 to the ended event for loop playback.

Sample code used to specify the rePlay attribute

rePlay:true

Sample code used to listen to the ended event

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

References