全部產品
Search
文件中心

ApsaraVideo VOD:快速接入Web播放器

更新時間:Jun 04, 2025

本文介紹如何在Web應用中接入播放器SDK並完成基礎的視頻播放配置。

接入前須知

  • 本文以接入版本2.25.1的Web播放器SDK為例進行說明,推薦您使用最新版本,最新版本Web播放器SDK請參見下載地址

  • Web播放器SDK從2.14.0版本開始支援播放H.265編碼協議的視頻流,從2.20.2版本開始支援播放H.266編碼協議的視頻流。本文僅介紹播放H.264編碼視頻的相關配置,有關播放H.265/H.266編碼視頻的配置方法請參見播放H.265/H.266編碼協議視頻流

準備工作

  • 已擷取Web網站綁定的網域名稱及License Key,詳情參考管理License

快速接入Web播放器

以下步驟示範如何在一個簡單的Web專案中接入和配置Web播放器SDK,若您使用了React、Vue等前端架構,請擷取源碼Demo後,參考範例程式碼進行整合,詳情參見線上體驗及Demo源碼

1、引入Web播放器SDK

NPM包方式引入

  1. 在專案中添加aliyun-aliplayer依賴。

    npm install aliyun-aliplayer --save
  2. 代碼中引入程式碼封裝及樣式檔案。

    import Aliplayer from 'aliyun-aliplayer';
    import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

script 標籤引入

說明

從2.16.3版本開始,Web播放器SDK的JS/CSS資源引入啟用新路徑。

由原來的:

CSS:https://g.alicdn.com/de/prismplayer/版本號碼/skins/default/aliplayer-min.css

JS:https://g.alicdn.com/de/prismplayer/版本號碼/aliplayer-min.js

變更為:

CSS:https://g.alicdn.com/apsara-media-box/imp-web-player/版本號碼/skins/default/aliplayer-min.css

JS:https://g.alicdn.com/apsara-media-box/imp-web-player/版本號碼/aliplayer-min.js

<!--本文以接入版本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" />  //(必須)引用此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>

2、提供掛載元素

<body>標籤處添加一個用以掛載播放介面的<div>節點,樣本如下:

<body>
  <div id="J_prismPlayer"></div>
</body>

3、初始化

Web播放器SDK找到id="J_prismPlayer"的DOM節點,把播放器的UI介面渲染到節點上。

var player = new Aliplayer({
  id: 'J_prismPlayer',
  license: {
    // 使用在準備工作中擷取到的網站網域名稱domain和License Key
    domain: "example.com", // 申請 License 時填寫的網域名稱
    key: "example-key" // 申請成功後,在控制台可以看到 License Key
  }
});

播放配置

下面展示播放器在不同情境下的參數配置。

點播視訊播放

點播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屬性設定為音視頻播放憑證。

  1. 音視頻ID可以在音視頻上傳完成後通過控制台(路徑:媒資庫>音/視頻)或服務端介面(SearchMedia)擷取。

  2. 音視頻播放憑證可以調用擷取音視頻播放憑證介面擷取。建議您整合點播服務端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>", // 必選參數。音視頻播放憑證。
    // authTimeout: 7200, // 播放地址的有效時間長度,單位:秒。該時間長度會覆蓋在ApsaraVideo for VOD控制台設定的URL鑒權的有效時間長度。如果不傳,則取預設值7200。如需設定此參數,請確保該時間大於視頻的實際時間長度,防止播放地址在播放完成前到期。
  },
  function (player) {
    console.log("The player is created.");
  }
);

點播STS播放

使用STS播放方式播放點播視訊是指用STS臨時憑證而非點播音視頻播放憑證播放。STS臨時憑證需要提前擷取,需要調用STS服務的AssumeRole介面產生,產生方式請參見擷取STS Token

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, // 播放地址的有效時間長度,單位:秒。該時間長度會覆蓋在ApsaraVideo for VOD控制台設定的URL鑒權的有效時間長度。如果不傳,則取預設值7200。如需設定此參數,請確保該時間大於視頻的實際時間長度,防止播放地址在播放完成前到期。
  },
  function (player) {
    console.log("The player is created.");
  }
);

點播加密播放

點播視訊支援阿里雲私人加密和DRM加密。加密播放請參見Web端播放加密視頻

說明

如需瞭解有關Web播放器初始化設定的更多詳細資料,請參閱播放器屬性

直播視頻播放

直播URL播放

使用URL播放方式播放直播視頻,需要將播放器的source屬性設定為直播拉流地址,同時將isLive屬性設定為true。

播放地址可以是第三方直播地址或阿里雲直播服務中的拉流地址。阿里雲直播拉流地址可以通過直播控制台的地址產生器產生。詳情請參見直播地址產生器

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // 播放地址,可以是第三方直播地址,或阿里雲直播服務中的拉流地址。
    isLive: true, // 是否為直播播放。
  },
  function (player) {
    console.log("The player is created.");
  }
);

直播DRM加密播放

直播DRM加密播放請參見如何播放加密視頻

超低延時直播(RTS)視頻播放

超低延時直播(RTS)使用URL方式播放,無需額外設定參數。

  1. RTS拉流地址可以通過直播控制台的地址產生器產生,詳情請參見直播地址產生器

  2. 阿里雲播放器通過整合RTS SDK實現RTS播放,預設整合最新版本的RTS SDK,您也可以通過參數指定RTS SDK版本,如:rtsVersion: '2.2.1'。

  3. 當瀏覽器不相容RTS或者RTS拉流失敗時,播放器會自動嘗試使用FLV或者HLS協議進行播放(如果瀏覽器支援,會優先選擇延遲更低的FLV協議作為降級)。

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);
});

相關閱讀

  • 如果您想進一步瞭解更多播放器對象的屬性、方法、事件配置,請參見介面說明