Integrate and use ApsaraVideo Player SDK for web to play audio and video files - Apsara Video SDK

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

Usage notes

ApsaraVideo Player SDK for web allows you to play audio and video files by using the HTML5 player and the 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 browsers. For more information, see Overview.
ApsaraVideo Player SDK for web V2.14.0 or later supports playback of H.265-encoded videos. To play H.265-encoded videos, submit a ticket on Yida to apply for a license. This topic describes how to integrate and use ApsaraVideo Player SDK for web to play H.264-encoded videos. For more information about how to use the SDK to play H.265-encoded videos, see the Play H.265 videos section of the "Advanced features" topic.
In this topic, ApsaraVideo Player SDK V2.25.1 for Web is used in the example. If you want to use other versions, obtain the version number and replace 2.25.1 in the sample code with the obtained version number. For more information, see Release notes for ApsaraVideo Player SDK for Web. The features of ApsaraVideo Player SDK for web are continuously updated and improved. We recommend that you use the latest version of the SDK. We provide full technical support for the latest version and limited technical support for earlier versions. For more information, see the Version status division and technical support policies section of the "Overview" topic.

Integration procedure

Integrate ApsaraVideo Player SDK for web.
ApsaraVideo Player SDK for web does not depend on frontend .js libraries. To initialize the player, you need to only add a reference to a .js file in the HTML document of your project.
- Add a reference to an adaptive .js file
  The adaptive .js file contains the adaptation logic for the Flash player and HTML5 player across devices. After you add a reference to the .js file, ApsaraVideo Player SDK for web automatically selects a player based on the environment. Add references to the .js file and .css file of ApsaraVideo Player SDK for web under the <head> tag in the HTML document of your project. Sample code:
```

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  // Optional. If you use the HTML5 player, add a reference to this .css file. 
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>  // Required. Add a reference to this. js file.
</head>
```
  Note
  After you add a reference to the adaptive .js file, specify useFlashPrism=true to use the Flash player or specify useH5Prism=true to use the HTML5 player.
- Add a reference to a single-player .js file
  If you use either the Flash player or the HTML5 player, you can add only a reference to the .js file for the player that you use. This reduces the file size.
  - If you use the HTML5 player, add references to the .js file and .css file of ApsaraVideo Player SDK for web under the <head> tag in the HTML document of your project. Sample code:
    <head> <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" /> // Required. If you use the HTML5 player, add a reference to this .css file. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-h5-min.js"></script> // Required. If you use the HTML5 player, add a reference to this .js file. </head>
  - If you use the Flash player, add a reference to the .js file of the ApsaraVideo Player SDK for web under the <head> tag in the HTML document of your project. Sample code:
    <head> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-flash-min.js"></script> // Required. If you use the Flash player, add a reference to this .js file. </head>
  If you use the Flash player in Internet Explorer 8, you must add a reference to the json.min.js file under the <head> tag in the HTML document of your project. Sample code:
```
https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/json/json.min.js
```
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>
```
Instantiate the player.
Add the following sample code under the <script> tag.
Play on-demand videos
URL-based playback
To play an on-demand video based on a URL, you must set the source parameter to the streaming URL. You can specify the streaming URL of an audio or video file stored in a third-party video-on-demand (VOD) service or in ApsaraVideo VOD.
You can call the GetPlayInfo operation to obtain the streaming URL of an audio or video file stored in ApsaraVideo VOD. We recommend that you integrate ApsaraVideo VOD SDK to obtain the streaming URL of an audio or video file stored in ApsaraVideo VOD. This frees you from complex signature calculations. For more information about the GetPlayInfo operation, see .
```
var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',// The streaming 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.')
 });
```
VidAuth-based playback
To play an on-demand video by using the VidAuth method, you must set the vid parameter to the ID of an audio or video file and 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 in the left-side navigation pane to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation to obtain the ID. For more information about the SearchMedia operation, see .
- You can call the GetVideoPlayAuth operation to obtain the playback credential. We recommend that you use ApsaraVideo VOD SDK to obtain credentials for media playback in ApsaraVideo VOD. This frees you from complex signature calculations. For more information about the GetVideoPlayAuth operation, see .
We recommend that you use VidAuth for video playback in ApsaraVideo VOD. Compared with video playback based on Security Token Service (STS), VidAuth-based playback is easier to use and more secure. For more information about the comparison between the two playback methods, see Comparison between credentials and STS.
```
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.')
 });
```
STS-based playback
If you play an on-demand video based on STS, a temporary STS token rather than a playback credential is used. In this case, you must obtain an STS token before you play the on-demand video. For more information about how to obtain an STS token, see Use STS to upload videos.
If you use STS-based playback, you must set the securityToken parameter to the temporary STS token and specify the temporary AccessKey pair.
```
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 in the left-side navigation pane to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation to obtain the ID. Example: 1e067a2831b641db90d570b6480f****. 
 accessKeyId: '<Your AccessKey ID>',// Required. The AccessKey ID that is returned when the temporary STS token is generated. 
 securityToken: '<your STS token>',// Required. The temporary STS token. You must obtain the temporary STS token in advance. For more information, see the documentation about how to create a RAM role and grant temporary access permissions to the role by using STS. 
 accessKeySecret: '<Your AccessKey secret>',// Required. The AccessKey secret that 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.')
 });
```
Encrypted playback
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.
Play live streams
URL-based live streaming
To stream content based on URLs, you must 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. You can generate a streaming URL for a live stream by using the URL generator in the ApsaraVideo Live console. For more information, see Live URL generator.
```
<script>
 var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',// The streaming URL, which can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live. 
 isLive: true,// Specify whether to play live streams. 
 },function(player){
 console.log('The player is created.')
 });
</script>
```
DRM-encrypted live streaming
For more information about DRM-encrypted live streaming, see Play an encrypted video.
Play live streams over RTS
Real-Time Streaming (RTS) allows you to play videos based on 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 the RTS SDK. By default, the latest version of the RTS SDK is integrated. You can also specify the RTS SDK version by configuring the parameter. For example, specify rtsVersion: '2.2.1'.
- RTS supports automatic playback degradation. You can set an alternative RTS URL, such as a streaming 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 the Use ApsaraVideo Player section of the "Best practices for RTS playback" topic.
```
<script>
var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',// The RTS URL. The artc:// protocol is used. 
 rtsFallbackSource: '<your play URL>',// Optional. The alternative RTS URL, such as a streaming URL in the HLS or FLV format. 
 isLive: true,// Specify whether to play live streams. 
 // rtsVersion: 'x.x.x', // Specify the version of the RTS SDK. 
},function(player){
 console.log('The player is created.')
});
// This event is triggered when a degraded protocol is used for playback. The reason parameter specifies the degradation cause and the fallbackUrl parameter specifies the alternative RTS URL. 
player.on('rtsFallback', function(event) {
 console.log(' EVENT rtsFallback', event.paramData);
})
</script>
```

Usage notes

Integration procedure

Play on-demand videos

URL-based playback

VidAuth-based playback

STS-based playback

Encrypted playback

Play live streams

URL-based live streaming

DRM-encrypted live streaming

Play live streams over RTS