官方組件 - ApsaraVideo VOD

阿里雲官方結合典型的情境需要，開發了一些常用的組件，您可直接開箱即用，也可在此基礎上進行二次開發。

背景資訊

組件源碼在Github開源提供，參見專案說明。
組件功能示範請參見功能示範。
移動端瀏覽器可能劫持Web SDK播放視頻的行為，導致部分功能不可用。
GitHub屬於第三方搭建的網站，可能存在部分使用者無法開啟網站或訪問延遲的問題。

官方組件列表

組件名稱	組件類型	介紹	效果展示
彈幕	`AliplayerDanmuComponent`	在控制條上增加了彈幕關閉和開啟按鈕，以及發送彈幕的輸入框，和發送彈幕的按鈕。詳情參見彈幕組件。
播放器動態浮水印（ID跑馬燈）	`BulletScreenComponent`	根據終端使用者特性，將ID等資訊以文字浮水印的形式展示在視頻畫面上，震懾侵權行為。使用者可以自訂文字浮水印出現的位置，文字顏色和字型大小。詳情參見跑馬燈組件。
字幕	`CaptionComponent`	用於快速切換不同語言的字幕。詳情參見跑馬燈元件。
多視頻廣告	`ManyVideoADComponent`	在視頻即將播放時，實現多視頻廣告。詳情參見多視頻廣告組件。
記憶播放	`MemoryPlayComponent`	自動記憶使用者上一次播放的視頻位置，記憶播放組件分兩種，一種點擊播放（會提示使用者上次播放的位置，使用者可以點擊seek），另一種是自動播放（自動seek到上次播放位置）。詳情參見記憶播放組件。說明記憶播放組件使用localStorage記錄播放位置，不支援localStorage的瀏覽器將不生效。
暫停廣告（圖片）	`PauseADComponent`	暫停視頻時在播放器的中間顯示圖片廣告。詳情參見暫停廣告組件。
視頻列表	`PlaylistComponent`	在Web播放器SDK控制條上增加視頻列表，視頻切換的按鈕，並在播放器上顯示視頻列表。詳情參見視頻列表組件。
試看	`PreviewVodComponent`	用於使用者試看，試看結束後提示使用者，觀看完整版的條件。詳情參見試看組件。
視頻打點	`ProgressComponent`	該組件是對視頻的關鍵點進行打點, 滑鼠移動到關鍵點時能夠查看目前使用者設定的圖片，詳情參見視頻打點組件。
清晰度	`QualityComponent`	清晰度組件是用來快速切換視訊清晰度的組件，詳情參見清晰度組件。
倍速播放	`RateComponent`	用於調整視頻倍速。詳情參見倍速播放組件
旋轉和鏡像	`RotateMirrorComponent`	在Web播放器SDK控制條上添加旋轉和鏡像按鈕，用於視頻旋轉和鏡像變換。詳情參見旋轉和鏡像組件。
開始廣告（圖片）	`StartADComponent`	視頻即將開始播放時顯示的圖片廣告。詳情參見開始廣告組件。
切換音軌	`TrackComponent`	音軌切換組件是用來切換視訊的音軌語言,詳情參見切換音軌組件。	-
視頻廣告	`VideoADComponent`	在視頻即將播放時，限時的視頻廣告。詳情參見視頻廣告組件。
播放下一個	PlayerNextComponent	在播放器的控制條上添加 `播放下一個` 視頻按鈕, 按鈕的點擊事件使用者可以自訂並作為組件參數傳入，詳情參見播放下一個組件。

使用組件

引入Web播放器SDK組件。目前沒有提供組件的CDN資源地址，請將播放器組件下載到本地後引入到專案中，建議使用最新版本。
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

Web播放器SDK掛載組件。

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//player.alicdn.com/video/editor.mp4",
    components: [
      {
        name: "StartADComponent",
        type: AliPlayerComponent.StartADComponent,
        args: [
          "https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg",
          "https://promotion.aliyun.com/ntms/act/videoai.html",
          3,
        ],
      },
      {
        name: "BulletScreenComponent",
        type: AliPlayerComponent.BulletScreenComponent,
        args: [
          "Welcome to use Aliplayer",
          { fontSize: "16px", color: "#00c1de" },
          "random",
        ],
      },
    ],
  },
  function (player) {}
);

每個組件配置項有3個參數：

名稱	說明
name	組件名稱，可用通過名稱得到組件
type	組件類型
args	組件的參數，請根據組件的建構函式傳入合適的參數。

如何自訂打包

打包全部組件

下面的兩個指令中的任意一個都可以打包全部播放器組件, 打包之後的檔案是 /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

自訂打包組件

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

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

componentsName 是組件的名稱, 多個組件名稱以空格隔開, 例如

$ npm run build AliplayerDanmu BulletScreen # 打包彈幕外掛程式和跑馬燈外掛程式