ApsaraVideo VOD:Integrate ApsaraVideo Player for Web

Playback based on URLs

To play videos from URLs, you must set the source parameter to the playback URL. You can specify the playback URL of a media file stored in a third-party VOD service or in ApsaraVideo VOD.

You can call the GetPlayInfo operation to obtain the playback URL of a media file stored in ApsaraVideo VOD. We recommend that you integrate ApsaraVideo VOD SDK to obtain media playback URLs. This frees you from complex signature calculations. For more information about the API, visit 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

To play videos based on VID and PlayAuth, you must set the vid parameter to the media ID and set the playauth parameter to the playback credential.

1. After you upload a media file, log on to the ApsaraVideo VOD console and choose Media Files > Audio/Video to view its ID. Alternatively, you can call the SearchMedia operation to obtain the ID.

2. Call the GetVideoPlayAuth operation to obtain the playback credential. We recommend that you integrate ApsaraVideo VOD SDK to obtain credentials for media playback. This frees you from complex signature calculations. For more information about the API, visit OpenAPI Explorer.

We recommend this playback method. Compared with STS-based playback, VidAuth-based playback is easier to use and more secure. For comparison, see Comparison between credentials and STS.

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

If you use STS-based playback, a temporary STS token rather than a playback credential is used. Call the AssumeRole operation to obtain an STS token in advance. 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. For more information about encrypted playback, see Play an encrypted video in a web browser.

URL-based live streaming

To stream content from URLs, set the source parameter to the streaming URL and the isLive parameter to true.

You can specify the streaming URL of a live stream in a third-party live streaming service or in ApsaraVideo Live. The ApsaraVideo Live console provides a URL generator to help you generate streaming URLs. For more information, see URL generator.

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 more information about DRM-encrypted live streaming, see Play an encrypted video.