本文介紹如何快速接入Web播放器并完成基礎的視頻播放。
接入前須知
阿里云Web播放器SDK支持HTML5和Flash兩種播放模式，請您提前明確所需集成的播放器模式，并了解相關功能支持和瀏覽器適配情況。關于功能支持和瀏覽器的適配說明，詳細內容請參見Web播放器SDK簡介。
Web播放器SDK從2.14.0版本開始支持播放H.265編碼協議的視頻流，從2.20.2版本開始支持播放H.266編碼協議的視頻流，如需使用此功能，您需要先填寫表單申請License授權。本文僅介紹播放H.264編碼視頻的相關配置，有關播放H.265/H.266編碼視頻的配置方法請參見播放H.265/H.266編碼協議視頻流。
本文以接入版本2.25.1的Web播放器SDK為例進行說明，如需接入其他版本，請參考Web播放器SDK獲取對應版本號，并在下述示例代碼中將2.25.1替換成目標版本號。Web播放器SDK在持續更新功能及優化性能，若無特殊情況，推薦您使用最新版本，針對最新版本我們將提供全面的技術支持，針對歷史版本僅提供有限的技術支持，具體請參見版本狀態劃分及技術支持策略。
快速接入
引入Web播放器SDK。
通過 npm 方式引入。
//先通過 npm install aliyun-aliplayer --save 安裝
import Aliplayer from 'aliyun-aliplayer';
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';或者通過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" /> //（可選）如果您的使用場景需要用到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" /> //（必須）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說明如需引入2.16.3及之后版本的Web播放器SDK，則引入路徑可參見上述示例；如需引入2.16.3之前版本的Web播放器SDK，則需將上述路徑中的
/apsara-media-box/imp-web-player節點替換為/de/prismplayer，例如引入2.15.2版本自適應模式的js文件示例為：<head> <link rel="stylesheet" /> //（可選）如果您的使用場景需要用到H5模式的播放器，則需引用此css文件。 <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script> //（必須）引入js文件。 </head>
提供掛載元素。
在
<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可以在音視頻上傳完成后通過控制臺（路徑：媒資庫>音/視頻）或服務端接口（SearchMedia）獲取。
音視頻播放憑證可以調用獲取音視頻播放憑證接口獲取。建議您集成點播服務端SDK來獲取音視頻播放憑證，免去自簽名的麻煩。調用接口獲取音視頻播放憑證的示例請參見開發者門戶。
推薦視頻點播用戶采用此播放方式。相比STS播放方式，PlayAuth播放方式在易用性和安全性上更有優勢，對比詳情請參見憑證方式與STS方式對比。
var player = new Aliplayer({ id: 'J_prismPlayer', width: '100%', vid : '<your video ID>', // 必選參數。音視頻ID。示例：1e067a2831b641db90d570b6480f****。 playauth : '<your PlayAuth>', // 必選參數。音視頻播放憑證。 // authTimeout: 7200, // 播放地址的有效時長，單位：秒。該時長會覆蓋在視頻點播控制臺設置的URL鑒權的有效時長。如果不傳，則取默認值7200。如需設置此參數，請確保該時間大于視頻的實際時長，防止播放地址在播放完成前過期。 },function(player){ console.log('The player is created.') });點播STS播放
使用STS播放方式播放點播視頻是指用STS臨時憑證而非點播音視頻播放憑證播放。STS臨時憑證需要提前獲取，需要調用STS服務的AssumeRole接口生成，生成方式請參見使用STS臨時授權方案上傳視頻。
var player = new Aliplayer({ id: 'J_prismPlayer', width: '100%', vid : '<your video ID>', // 必選參數。音視頻ID可以在音視頻上傳完成后通過控制臺（路徑：媒資庫 > 音/視頻。）或服務端接口（SearchMedia ）獲取。示例：1e067a2831b641db90d570b6480f****。 accessKeyId: '<your AccessKey ID>', // 必選參數。STS臨時AK對的訪問密鑰ID，生成STS安全令牌時返回。 securityToken: '<your STS token>', // 必選參數。STS安全令牌，需要調用STS服務的AssumeRole接口生成。 accessKeySecret: '<your AccessKey Secret>', // 必選參數。STS臨時AK對的訪問密鑰，生成STS安全令牌時返回。 region: '<region of your video>', // 必選參數。媒體資源所在的地域標識。如cn-shanghai、eu-central-1, ap-southeast-1等。 // authTimeout: 7200, // 播放地址的有效時長，單位：秒。該時長會覆蓋在視頻點播控制臺設置的URL鑒權的有效時長。如果不傳，則取默認值7200。如需設置此參數，請確保該時間大于視頻的實際時長，防止播放地址在播放完成前過期。 },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加密播放請參見播放DRM加密視頻-Web端。
超低延時直播（RTS）視頻播放
超低延時直播（RTS）使用URL方式播放，無需額外設置參數。
RTS拉流地址可以通過直播控制臺的地址生成器生成，詳情請參見直播地址生成器。
阿里云播放器通過集成RTS SDK實現RTS播放，默認集成最新版本的RTS SDK，您也可以通過參數指定RTS SDK版本，如：rtsVersion: '2.2.1'。
當瀏覽器不兼容RTS或者RTS拉流失敗時，播放器會自動嘗試使用FLV或者HLS協議進行播放（如果瀏覽器支持，會優先選擇延遲更低的FLV協議作為降級）。
<script> var player = new Aliplayer({ id: 'J_prismPlayer', source: '<your play URL>', // 播放地址，使用超低延時直播（RTS）地址，協議是artc://。 isLive: true, // 是否為直播播放。 // rtsFallback: false, //（可選）是否開啟RTS自動降級，默認為 true // rtsFallbackType: 'HLS', //（可選）指定降級到的協議，可選 HLS/FLV，默認是自動選擇，優先選擇延遲更低的FLV，如果瀏覽器不支持則降級到 HLS // rtsFallbackSource: '<your play URL>', // （可選）指定降級地址，而不是讓播放器自動選擇 // rtsVersion: 'x.x.x', // （可選）可以手動指定RTS SDK的版本。 },function(player){ console.log('The player is created.') }); // 當RTS拉流成功時觸發，通過訂閱該事件，可以獲取到RTS TraceId。 回調函數的參數中traceId為拉流的TraceId，source為當前RTS流的播放地址。 player.on('rtsTraceId', function(event) { console.log('EVENT rtsTraceId', event.paramData); }) // 當RTS降級時觸發，參數reason為降級的原因，fallbackUrl為降級到的地址。 player.on('rtsFallback', function(event) { console.log(' EVENT rtsFallback', event.paramData); }) </script>通用媒體管理服務視頻播放
說明Web播放器SDK需使用2.10.0及以上版本。
基于通用媒體管理服務視頻的mediaAuth方式的簡單播放方案。
mediaAuth可以登錄通用媒體管理服務控制臺獲取（路徑：媒資管理 > 視頻管理 > 管理 > 基礎配置）。
<script> var player = new Aliplayer({ id: 'J_prismPlayer', mediaAuth: '<your mediaAuth>', // 視頻的播放憑證，可以在通用媒體管理服務控制臺獲取。 },function(player){ console.log('The player is created.') }); // 也可以使用replayByMediaAuth函數切換不同的mediaAuth播放（前提是已經使用mediaAuth初始化播放器）。 // player.replayByMediaAuth('another mediaAuth'); </script>
接入常見問題
如何在Vue項目中接入阿里云Web播放器SDK？
阿里云Web播放器SDK提供基于Vue的播放器Demo源碼，您可以參考使用。Demo獲取地址，請參見Vue Demo源碼。