All Products
Search
Document Center

ApsaraVideo VOD:Integration

Last Updated:May 30, 2023

This topic describes how to integrate and use ApsaraVideo Player SDK for Web to play audio and video files.

Prerequisites

  • ApsaraVideo Player SDK for Web allows you to play audio and video files by using the HTML5 player or Flash player. Before you integrate ApsaraVideo Player SDK for Web, you must determine the player that you want to use and learn about its features and compatibility with different browsers. For more information, see Overview.

  • ApsaraVideo Player SDK for Web V2.14.0 or later supports playback of H.265 videos. To play H.265 videos, submit a request on Yida to apply for a license. This topic describes how to integrate and use ApsaraVideo Player SDK for Web to play H.264 videos. For more information about how to use the SDK to play H.265 videos, see Play H.265 videos.

  • This topic describes how to integrate ApsaraVideo Player SDK for Web V2.15.2. If you want to integrate other versions of ApsaraVideo Player SDK for Web, obtain the version number described in Release notes for ApsaraVideo Player SDK for Web and replace 2.15.2 with the version number that you obtained in the following sample code. The features of ApsaraVideo Player SDK for Web are being continuously updated and improved. We recommend that you use the SDK of the latest version.

Integrate the SDK

  1. Integrate ApsaraVideo Player SDK for Web.

    ApsaraVideo Player SDK for Web does not depend on frontend .js libraries. You only need to add a specific .js file to your project to initialize the player.

    • Method 1: Use Alibaba Cloud CDN

      • Add an adaptive .js file

        The adaptive .js file contains the adaptation logic for the Flash player and HTML5 player on multiple devices. After you add the .js file, ApsaraVideo Player SDK for Web automatically selects a player based on the environment. Add the .js file and CSS file for ApsaraVideo Player SDK for Web under the <head> tag in the page file. Sample code:

        <head>
          <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // Optional. If you want to use the HTML5 player for playback, you must add the .css file to your project. 
          <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script>  // Required. You must add the .js file. 
        </head>
        Note

        After you add the adaptive .js file, specify useFlashPrism=true to use the Flash player or specify useH5Prism=true to use the HTML5 player.

      • Add a single-mode .js file

        If you use only the Flash player or HTML5 player, you can add the .js file for only the player that you use to your project to reduce the file size.

        • If you use the HTML5 player, add the .js file and CSS file of the ApsaraVideo Player SDK for Web under the <head> tag in the page file. Sample code:

          <head>
            <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // Required. You must add the .css file to use the HTML5 player. 
            <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // Required. You must add the .js file to use the HTML5 player. 
          </head>
        • If you use the Flash player, add the .js file and CSS file of the ApsaraVideo Player SDK for Web under the <head> tag in the page file. Sample code:

          <head>
            <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-flash-min.js"></script>  // Required. You must add the .js file to use the Flash player. 
          </head>

        If you use the Flash player in Internet Explorer 8, you must add the reference to the json.min.js file under the <head> tag in the code file. Sample code:

        https://g.alicdn.com/de/prismplayer/2.15.2/json/json.min.js
    • Method 2: Use NPM

      1. Install the node package manager (NPM) package.

        npm i aliyun-aliplayer
      2. Export the aliplayer object and CSS file.

        // Export the aliplayer object.
        import 'aliyun-aliplayer'
        // Export the CSS file.
        import 'aliyun-aliplayer/dist/skins/default/aliplayer-min.css'
  2. Specify a container for the player.

    Add a <div> node that is used to mount the player under the <body> tag. Sample code:

    <body>
      <div id="J_prismPlayer"></div>
    </body>
  3. Instantiate the player.

    • ApsaraVideo Player SDK for Web supports playback from URLs, playback based on VID and PlayAuth, Security Token Service (STS)-based playback, playback by using ApsaraVideo Media Processing (MPS), and encrypted playback. We recommend that you play videos based on VID and PlayAuth. For more information, see On-demand playback.

    • ApsaraVideo Player SDK for Web supports streaming from URLs and encrypted streaming. For more information, see Playback of live streams.

    Add the following sample code under the <script> tag:

On-demand playback

To play videos from URLs, you must set the source parameter to the playback URL. The playback URL can be the playback URL of an audio or video file stored in a third-party VOD service or in ApsaraVideo VOD. You can call the GetPlayInfo operation to obtain a playback URL that is generated by ApsaraVideo VOD. We recommend that you integrate an ApsaraVideo VOD server SDK to obtain the playback URL of an audio or video file stored in ApsaraVideo VOD. This frees you from complex signature calculation. For more information about how to call the GetPlayInfo operation, see OpenAPI Explorer.

Sample code for playback from URLs

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

To play videos based on VID and PlayAuth, you must set the vid parameter to the audio or video ID and set the playauth parameter to the playback credential. 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 audio or video ID. Alternatively, you can call the SearchMedia operation provided by a server SDK to obtain the audio or video ID. You can call the GetVideoPlayAuth operation to obtain the playback credential. We recommend that you integrate an ApsaraVideo VOD server SDK to obtain the playback credential. This frees you from complex signature calculation. For more information about the GetVideoPlayAuth operation, see OpenAPI Explorer.

We recommend that you use this playback method in ApsaraVideo VOD. Compared with STS-based playback, playback implemented based on PlayAuth is easier and more secure. For more information about the comparison between the two playback methods, see Comparison between credentials and STS.

Sample code for playback based on VID and PlayAuth

var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>',// Required. The ID of the audio or video file. Example: 1e067a2831b641db90d570b6480f****. 
           playauth : '<your PlayAuth>',// Required. The playback credential. 
         },function(player){
           console.log('The player is created.')
        });

If you use STS-based playback, a temporary STS token rather than a playback credential is used. You must obtain the temporary STS token in advance. For more information, see Create a role and grant temporary access permissions to the role by using STS. You must set the securityToken parameter to the obtained STS token and set the accessKeyId and accessKeySecret parameters to the AccessKey ID and AccessKey secret that are generated based on the STS token.

Sample code for STS-based playback

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 audio or video ID. Alternatively, you can call the SearchMedia operation provided by a server SDK to obtain the audio or video ID. For more information, see SearchMedia. 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 temporary playback credential. The STS token must be generated in advance. For more information, see Create a role and grant temporary access permissions to the role by using STS. 
       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. 
     },function(player){
       console.log('The player is created.')
       });

You can use MPS to play media files if you are using the MPS service. You must obtain the following information before you use MPS for playback.

  • vid: the ID of the media asset in MPS.
  • accessKeyId and accessKeySecret: the temporary AccessKey pair issued along with the STS token.
  • SecurityToken: the temporary STS token.
  • domainRegion: the region in which the media file is stored.
  • authInfo: the authorization information.

For information about media assets in MPS, see Play videos.

Sample code for MPS playback

var player = new Aliplayer({
       id: 'J_prismPlayer',
       width: '100%',
       vid : '<your media ID in MPS>',// Required. To query the ID of your media asset in the MPS console, you can log on to the MPS console and choose Media Management > Media List in the left-side navigation pane. On the page that appears, you can view the ID of the media asset. Example: 1e067a2831b641db90d570b6480f****. 
       accId: '<your AccessKey ID>',// Required. The AccessKey ID is returned when the temporary STS token is generated. 
       accSecret: '<your AccessKey Secret>',// Required. The AccessKey secret is returned when the temporary STS token is generated. 
       stsToken: '<your STS token>',// Required. The temporary playback credential. The STS token must be generated in advance. 
       domainRegion: '<your domain region>',// Required. The ID of the region in which your media asset resides, such as cn-shanghai or cn-hangzhou. 
       authInfo: '<your auth info>',// Required. The authorization information, which must be obtained in advance. 
     },function(player){
       console.log('The player is created.')
    });

ApsaraVideo VOD supports Alibaba Cloud proprietary cryptography and digital rights management (DRM) encryption. For more information about how to play encrypted videos, see Play an encrypted video.

Playback of live streams

To stream content from URLs, you must set the source parameter to the streaming URL and the isLive parameter to true. The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live. The ApsaraVideo Live console provides a URL generator to help you generate streaming URLs. For more information, see Live URL generator.

Sample code for streaming from URLs

<script>
  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,// Specify whether the content that you want to play is a live steam. 
    },function(player){
      console.log('The player is created.')
    });
</script>

For more information about how to play DRM-encrypted streams, see Play an encrypted video.

Real-Time Streaming (RTS) playback

RTS allows you to play from URLs, without the need to configure additional parameters. You can use the URL generator in the ApsaraVideo Live console to generate an RTS URL. For more information, see live URL generator. ApsaraVideo Player implements RTS playback by integrating RTS SDK. By default, the latest version of RTS SDK is integrated. You can also specify the RTS SDK version by configuring the parameter. For example, set rtsVersion: '2.2.1'.

Automatic playback degradation is supported by RTS. You can set an alternative RTS URL, such as a playback URL in the HLS or FLV format. If your browser does not support RTS or stream pulling over RTS fails, the video specified in this URL is automatically played. For more information, see Use ApsaraVideo Player.

Sample code for playback from RTS URLs

<script>
var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>',// The RTS playback URL. The artc:// protocol is used. 
    rtsFallbackSource: '<your play URL>',// Optional. The alternative RTS URL, such as a playback URL in the HLS or FLV format. 
    isLive: true,// Specify whether the content that you want to play is a live steam. 
    // rtsVersion: 'x.x.x', // Specify the version of RTS SDK. 
},function(player){
    console.log('The player is created.')
});
// This event is triggered when a degraded protocol is used for playback. reason indicates the degradation cause and fallbackUrl indicates the alternate URL. 
player.on('rtsFallback', function(event) {
    console.log(' EVENT rtsFallback', event.paramData);
})
</script>

References