ApsaraVideo VOD：外掛程式組件

內建群組件

記憶播放

自動記憶使用者上一次播放的視頻位置，記憶播放組件分兩種，一種點擊播放（會提示使用者上次播放的位置，使用者可以點擊seek），另一種是自動播放（自動seek到上次播放位置）。更多資訊請參見記憶播放組件。

播放器動態浮水印（ID跑馬燈）

根據終端使用者特性，將ID等資訊以文字浮水印的形式展示在視頻畫面上，震懾侵權行為。使用者可以自訂文字浮水印出現的位置，文字顏色和字型大小。更多資訊，請參見跑馬燈組件。

開始廣告（圖片）

視頻即將開始播放時顯示的圖片廣告。更多資訊，請參見開始廣告組件。

暫停廣告（圖片）

暫停視頻時在播放器的中間顯示圖片廣告。更多資訊，請參見暫停廣告組件。

多視頻廣告

在視頻即將播放時，實現多視頻廣告。更多資訊，請參見多視頻廣告組件。

播放下一個

在Web播放器SDK的控制條上添加播放下一個視頻按鈕，按鈕的點擊事件使用者可以自訂並作為組件參數傳入。更多資訊，請參見播放下一個組件。

播放清單

在Web播放器SDK控制條上增加視頻列表，視頻切換的按鈕，並在播放器上顯示視頻列表。更多資訊，請參見播放清單組件。

旋轉和鏡像

在Web播放器SDK控制條上添加旋轉和鏡像按鈕，用於視頻旋轉和鏡像變換。更多資訊，請參見旋轉和鏡像組件。

視頻廣告

在視頻即將播放時，限時的視頻廣告。更多資訊，請參見視頻廣告組件。

彈幕

在控制條上增加了彈幕關閉和開啟按鈕，以及發送彈幕的輸入框，和發送彈幕的按鈕。更多資訊，請參見彈幕組件。

試看

用於使用者試看，試看結束後提示使用者，觀看完整版的條件。更多資訊，請參見試看組件。

進度條標記

對視頻的關鍵點進行打點，滑鼠移動到關鍵點時能夠查看目前使用者設定的圖片等標註資訊。更多資訊，請參見進度打點組件。

字幕

用於快速切換不同語言的字幕。更多資訊，請參見跑馬燈元件。

音軌

用於切換不同版本的音軌。更多資訊，請參見音軌組件。

引入組件

1. 引入Web播放器SDK組件。

   <script type="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.9.min.js"></script>

   說明

   目前沒有CDN資源，請將播放器組件下載到本地後引入。下載地址請參見播放器組件下載。

2. Web播放器SDK掛載組件。

   說明

   本文僅提供範例程式碼，不同組件細節不同，需要具體配置。

   var player = new Aliplayer({
           id: "player-con",
           source: "//player.alicdn.com/video/editor.mp4",
           components: [{
               name: 'xxxComponent',
               type: AliPlayerComponent.xxxComponent
           }]
        }, function (player) {
    });

組件使用

當只需要單獨的某個組件時，只需要引用對應組件的JS檔案，如果引用的是Web播放器SDK組件庫檔案，則通過AliPlayerComponent.XXX引用具體的組件。

打包組件

"build_customize": set NODE_ENV=production&&webpack --config webpack.config.customize.js --progress

• 打包全部組件

  下面的兩個指令中的任意一個都可以打包全部Web播放器SDK組件，打包之後的檔案是/disk/aliplayer-components/aliplayercomponents.min.js。

  $ npm run build
  # 或者
  $ npm run build all

• 打包自訂群組件

  為了減少體積，使用者可以自己選擇需要打包的組件，只要執行以下命令：

  $ npm run build componentsName # componentsName 是組件名稱

  說明

  componentsName 是組件的名稱，多個組件名稱以空格隔開，例如$ npm run build AliplayerDanmu BulletScreen # 打包彈幕組件和跑馬燈組件，componentsName 可選的值有：

  • AliplayerDanmu：彈幕組件

  • BulletScreen：跑馬燈組件

  • MemoryPlay：記憶播放組件

  • PauseAD：暫停廣告（圖片）組件

  • PlayerNext：播放下一個視頻組件

  • Playlist：播放清單組件

  • Preview：試看組件

  • RotateMirror：旋轉鏡像組件

  • StartAD：開始廣告（圖片）組件

  • Staticad：靜態廣告（圖片）組件

  • VideoAD：視頻廣告組件

  • Caption：跑馬燈元件

  • Track：音軌組件

  • ManyVideoAD：多視頻廣告組件

  • RateComponent：倍速組件

  打包之後的檔案是 /disk/aliplayer-components/aliplayercomponents.min.js ，引用到使用者的頁面中即可。

引用具體的組件

• 在HTML檔案中引用具體的JS檔案

  
  <script type="text/javascript" src="js/staticAdComponent.min.js"></script>
                      

• 給Web播放器SDK注入組件

  var option = {
       id: "J_prismPlayer",
       autoplay: true,
       isLive:false,
       playsinline:true,
       width:"100%",
       height:"100%",
       useH5Prism:true, //啟用H5播放器
       useFlashPrism:false,
       source:source,
       vid:vid,
       playauth:playauth,
       cover:"",
       components:[{type:StaticAdComponent,args:['http://cdnoss.example.com/cover****.png',
       'http://player.alicdn.com']}]
  };
  
  var player = new Aliplayer(option);
                      

引入Web播放器SDK組件庫

• 在HTML檔案中引用具體的JS檔案

  <script type="text/javascript" src="js/aliplayerComponents.min.js"></script>

• 給Web播放器SDK注入組件

  名稱	說明
  name	組件名稱，可以通過名稱得到組件
  type	組件類型
  args	組件的參數

  var option = {
       id: "J_prismPlayer",
       autoplay: true,
       isLive:false,
       playsinline:true,
       width:"100%",
       height:"100%",
       useH5Prism:true, //啟用H5播放模式
       useFlashPrism:false,
       source:source,
       vid:vid,
       playauth:playauth,
       cover:"",
       components:[{type:AliPlayerComponent.StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png',
       'http://player.alicdn.com']},
       notParameComponent,
       {name:'adComponent1',type:notParameComponent}
       ]
  };
  
  var player = new Aliplayer(option);
                      

擷取組件

提供getComponent方法擷取執行個體組件，參數為組件的名字。

var component = player.getComponent('adComponent');

安裝依賴項

$ cd customComponents
$ npm install