如何快速接入Web端播放器SDK並完成基礎的視頻播放 - Apsara Video 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來擷取音視頻播放憑證，免去自簽名的麻煩。調用介面擷取音視頻播放憑證的樣本請參見。
推薦ApsaraVideo for VOD使用者採用此播放方式。相比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）視頻播放