Integrate ApsaraVideo Player SDK for Web

Playback based on URLs

Set the source parameter to the playback URL of a media file from a third-party service or ApsaraVideo VOD.

Call the GetPlayInfo operation to obtain the playback URL of a media file in ApsaraVideo VOD. We recommend integrating ApsaraVideo VOD SDK to avoid complex signature calculations. Try the API in OpenAPI Explorer.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The playback URL of a media file stored in a third-party VOD service or in ApsaraVideo VOD.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Playback based on VID and PlayAuth

Set vid to the media ID and playauth to the playback credential.

1. After uploading a media file, find its ID in the ApsaraVideo VOD console under Media Files > Audio/Video. Alternatively, call the SearchMedia operation.

2. Call the GetVideoPlayAuth operation to obtain the playback credential. We recommend integrating ApsaraVideo VOD SDK to avoid complex signature calculations. Try the API in OpenAPI Explorer.

VidAuth-based playback is recommended over STS for simplicity and security. For comparison, see Credential method vs. STS method.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. The ID of the media file. Example: 1e067a2831b641db90d570b6480f****.
    playauth: "<your PlayAuth>", // Required. The playback credential.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Playback based on STS

STS-based playback uses a temporary STS token instead of a playback credential. Call the AssumeRole operation to obtain an STS token. For more information, see Obtain an STS token.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Required. After you upload an audio or video file, you can log on to the ApsaraVideo VOD console and choose Media Files > Audio/Video to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation provided by the ApsaraVideo VOD SDK to obtain the ID. Example: 1e067a2831b641db90d570b6480f****.
    accessKeyId: "<your AccessKey ID>", // Required. The AccessKey ID is returned when the temporary STS token is generated.
    securityToken: "<your STS token>", // Required. The STS token. To obtain an STS token, call the AssumeRole operation.
    accessKeySecret: "<your AccessKey Secret>", // Required. The AccessKey secret is returned when the temporary STS token is generated.
    region: "<region of your video>", // Required. The ID of the region in which the media asset resides, such as cn-shanghai, eu-central-1, or ap-southeast-1.
    // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. This setting overwrites the validity period that you configured in the ApsaraVideo VOD console. If you leave this parameter empty, the default value 7200 is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete.
  },
  function (player) {
    console.log("The player is created.");
  }
);

Encrypted playback

ApsaraVideo VOD supports Alibaba Cloud proprietary cryptography and DRM encryption. Play an encrypted video in a web browser.

URL-based live streaming

Set source to the streaming URL and isLive to true.

The streaming URL can be from a third-party service or ApsaraVideo Live. Generate URLs with the URL generator in the ApsaraVideo Live console.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live.
    isLive: true, // Specifies whether to play live streams.
  },
  function (player) {
    console.log("The player is created.");
  }
);

DRM-encrypted live streaming

For DRM-encrypted live streaming: Play an encrypted video.