如何快速接入Web端播放器SDK并完成基础的视频播放 - 音视频终端SDK

本文介绍如何快速接入Web端播放器SDK并完成基础的视频播放。

接入前须知

阿里云Web端播放器SDK支持HTML5和Flash两种播放模式，请您提前明确所需集成的播放器模式，并了解相关功能支持和浏览器适配情况。关于功能支持和浏览器的适配说明，详细内容请参见Web端播放器SDK简介。
Web端播放器SDK从2.14.0版本开始支持播放H.265编码协议的视频流，如需使用此功能，您需要先填写表单申请License授权。本文仅介绍播放H.264编码视频的相关配置，有关播放H.265编码视频的配置方法请参见播放H.265编码协议视频流。
本文以接入版本2.25.1的Web播放器SDK为例进行说明，如需接入其他版本，请参考Web播放器SDK获取对应版本号，并在下述示例代码中将2.25.1替换成目标版本号。Web播放器SDK在持续更新功能及优化性能，若无特殊情况，推荐您使用最新版本，针对最新版本我们将提供全面的技术支持，针对历史版本仅提供有限的技术支持，具体请参见版本状态划分及技术支持策略。

接入步骤

引入Web端播放器SDK。

Web端播放器SDK不依赖于任何的前端js库，只需要在页面中引用js文件，就可以进行初始化。

引入自适应模式的js文件

该js文件同时包含了Flash和H5跨终端自适应的逻辑。引入该js文件后，播放器SDK会自行适配播放模式。在项目前端页面文件中的<head>标签处引入Web端播放器SDK的JS文件和CSS文件，示例如下：

<!--本文以接入版本2.25.1的Web播放器SDK为例进行说明，如需接入其他版本，请参考Web播放器SDK获取对应版本号，并在下述示例代码中将2.25.1替换成目标版本号-->
<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  //（可选）如果您的使用场景需要用到H5模式的播放器，则需引用此css文件。
  <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>  //（必须）引入js文件。
</head>

说明

引入自适应模式的js文件后，如需自定义播放模式，设置useFlashPrism=true表示Flash模式，设置useH5Prism=true表示H5模式。

引入单模式的js文件

如果您只是想使用其中一种播放技术，也可以只引用对应技术的js文件，从而获得更小的文件体积。

H5模式，在项目前端页面文件中的<head>标签处引入Web端播放器SDK的JS文件和CSS文件，示例如下：

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  //（必须）H5模式播放器，需引用此css文件。
  <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>  //（必须）引入H5模式的js文件。
</head>

Flash模式，在项目前端页面文件中的<head>标签处引入Web端播放器SDK的JS文件，示例如下：

<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>  //（必须）引入Flash模式的js文件。
</head>

在IE 8浏览器使用Flash模式的播放器时，需要在项目前端页面文件中的<head>标签处添加json.min.js的引用，示例如下：

https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/json/json.min.js

提供挂载元素。
在<body>标签处添加一个用以挂载播放界面的<div>节点，示例如下：
```
<body>
 <div id="J_prismPlayer"></div>
</body>
```
实例化播放器。
在<script>标签中添加如下示例代码：
点播视频播放
点播URL播放
使用URL播放方式播放点播视频，需要将播放器的source属性设置为播放地址。播放地址可以是第三方点播地址或阿里云点播服务中的播放地址。
阿里云播放地址可以调用获取音视频播放地址接口获取。议您集成点播服务端SDK来获取音视频播放地址，免去自签名的麻烦。调用接口获取音视频播放地址的示例请参见。
```
var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',//播放地址，可以是第三方点播地址，或阿里云点播服务中的播放地址。
 },function(player){
 console.log('The player is created.')
 });
```
VID+PlayAuth播放
使用VID+PlayAuth播放方式播放点播视频，需要将播放器的vid属性设置为音视频ID，将playauth属性设置为音视频播放凭证。
- 音视频ID可以在音视频上传完成后通过控制台（路径：媒资库>音/视频。）或服务端接口（）获取。
- 音视频播放凭证可以调用获取音视频播放凭证接口获取。建议您集成点播服务端SDK来获取音视频播放凭证，免去自签名的麻烦。调用接口获取音视频播放凭证的示例请参见。
推荐视频点播用户采用此播放方式。相比STS播放方式，PlayAuth播放方式在易用性和安全性上更有优势，对比详情请参见凭证方式与STS方式对比。
```
var player = new Aliplayer({
 id: 'J_prismPlayer',
 width: '100%',
 vid : '<your video ID>',//必选参数。音视频ID。示例：1e067a2831b641db90d570b6480f****。
 playauth : '<your PlayAuth>',//必选参数。音视频播放凭证。
 },function(player){
 console.log('The player is created.')
 });
```
点播STS播放
使用STS播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时Token需要提前获取，获取方式请参见使用STS临时授权方案上传视频。
播放时需要将播放器的securityToken属性设置为STS临时Token，同时设置为STS临时Token生成的临时AK对（accessKeyId和accessKeySecret）。
```
var player = new Aliplayer({
 id: 'J_prismPlayer',
 width: '100%',
 vid : '<your video ID>',//必选参数。音视频ID可以在音视频上传完成后通过控制台（路径：媒资库 > 音/视频。）或服务端接口（SearchMedia ）获取。示例：1e067a2831b641db90d570b6480f****。
 accessKeyId: '<your AccessKey ID>',//必选参数。生成STS临时Token时返回。
 securityToken: '<your STS token>',//必选参数。视频播放的临时凭证。凭证需要提前生成。生成方式请参考创建角色并进行STS临时授权。
 accessKeySecret: '<your AccessKey Secret>',//必选参数。生成STS临时Token时返回。
 region: '<region of your video>', // 必选参数。媒体资源所在的地域标识。如cn-shanghai、eu-central-1, ap-southeast-1等。
 },function(player){
 console.log('The player is created.')
 });
```
点播加密播放
点播视频支持阿里云私有加密和DRM加密。加密播放请参见如何播放加密视频。
直播视频播放
直播URL播放
使用URL播放方式播放直播视频，需要将播放器的source属性设置为直播拉流地址，同时将isLive属性设置为true。
播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见直播地址生成器。
```
<script>
 var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',//播放地址，可以是第三方直播地址，或阿里云直播服务中的拉流地址。
 isLive: true,//是否为直播播放。
 },function(player){
 console.log('The player is created.')
 });
</script>
```
直播DRM加密播放
直播DRM加密播放请参见如何播放加密视频。
超低延时直播（RTS）视频播放
超低延时直播（RTS）使用URL方式播放，无需额外设置参数。
- RTS拉流地址可以通过直播控制台的地址生成器生成，详情请参见直播地址生成器。
- 阿里云播放器通过集成RTS SDK实现RTS播放，默认集成最新版本的RTS SDK，您也可以通过参数指定RTS SDK版本，如：rtsVersion: '2.2.1'。
- 支持RTS降级播放功能，通过设置RTS的降级地址（如HLS地址或FLV地址），当浏览器不兼容RTS或RTS拉流失败时，会自动降级到该地址播放，更多内容请参见使用阿里云播放器Aliplayer集成RTS。
```
<script>
var player = new Aliplayer({
 id: 'J_prismPlayer',
 source: '<your play URL>',//播放地址，使用超低延时直播（RTS）地址，协议是artc://。
 rtsFallbackSource: '<your play URL>',//（可选）RTS的降级地址（如HLS地址或FLV地址）。
 isLive: true,//是否为直播播放。
 // rtsVersion: 'x.x.x', //可以手动指定RTS SDK的版本。
},function(player){
 console.log('The player is created.')
});
//当RTS降级时触发，参数reason为降级的原因，fallbackUrl为降级到的地址。
player.on('rtsFallback', function(event) {
 console.log(' EVENT rtsFallback', event.paramData);
})
</script>
```

接入前须知

接入步骤

点播视频播放

点播URL播放

VID+PlayAuth播放

点播STS播放

点播加密播放

直播视频播放

直播URL播放

直播DRM加密播放

超低延时直播（RTS）视频播放