全部產品
Search
文件中心

ApsaraVideo VOD:快速接入

更新時間:Nov 12, 2024

本文介紹如何快速接入Web播放器並完成基礎的視頻播放。

接入前須知

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

  • 阿里雲Web播放器SDK支援HTML5和Flash兩種播放模式,請您在整合前明確所需的播放器模式,並瞭解相關功能支援和瀏覽器適配情況,詳細內容請參見Web播放器SDK簡介

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

快速接入

  1. 引入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" 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
      說明

      如需引入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" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  //(可選)如果您的使用情境需要用到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>
  2. 提供掛載元素。

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

    <body>
      <div id="J_prismPlayer"></div>
    </body>
  1. 配置License。

    說明
    • 2024年12月1日起,新版Web播放器SDK必須按以下操作配置License後,方可使用。

    • 播放器SDK現免費提供,License有效期間為1年,詳情請參見管理License

    • License配置完成後,播放器介面若無相關錯誤提示,則表示 License 配置成功。

    • 請確保播放器所在頁面的網域名稱和申請License時填寫的網域名稱保持一致,或者是填寫網域名稱的子網域名稱,否則License校正將會不通過(localhost 不會校正)。

    在初始化播放器時傳入license欄位,包含註冊的網域名稱和License Key:

    var player = new Aliplayer({
      license: {
        domain: "example.com", // 申請 License 時填寫的網域名稱
        key: "example-key" // 申請成功後,在控制台可以看到 License Key
      }
    });
  2. 執行個體化播放器。

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

    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臨時授權方案上傳視頻

    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加密。加密播放請參見如何播放加密視頻

    直播視頻播放

    直播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方式播放,無需額外設定參數。

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

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

    3. 當瀏覽器不相容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>

接入常見問題

如何在Vue專案中接入阿里雲Web播放器SDK?

阿里雲Web播放器SDK提供基於Vue的播放器Demo源碼,您可以參考使用。Demo擷取地址Vue Demo源碼

更多接入常見問題,請參見Web播放器常見問題

相關文檔