內(nèi)置組件

記憶播放

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

播放器動態(tài)水印（ID跑馬燈）

根據(jù)終端用戶特性，將ID等信息以文字水印的形式展示在視頻畫面上，震懾侵權(quán)行為。用戶可以自定義文字水印出現(xiàn)的位置，文字顏色和字體大小。更多信息，請參見跑馬燈組件。

開始廣告（圖片）

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

暫停廣告（圖片）

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

多視頻廣告

在視頻即將播放時，實現(xiàn)多視頻廣告。更多信息，請參見多視頻廣告組件。

播放下一個

在Web播放器SDK的控制條上添加播放下一個視頻按鈕，按鈕的點擊事件用戶可以自定義并作為組件參數(shù)傳入。更多信息，請參見播放下一個組件。

播放列表

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

旋轉(zhuǎn)和鏡像

在Web播放器SDK控制條上添加旋轉(zhuǎn)和鏡像按鈕，用于視頻旋轉(zhuǎn)和鏡像變換。更多信息，請參見旋轉(zhuǎn)和鏡像組件。

視頻廣告

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

彈幕

在控制條上增加了彈幕關(guān)閉和開啟按鈕，以及發(fā)送彈幕的輸入框，和發(fā)送彈幕的按鈕。更多信息，請參見彈幕組件。

試看

用于用戶試看，試看結(jié)束后提示用戶，觀看完整版的條件。更多信息，請參見試看組件。

進(jìn)度條標(biāo)記

對視頻的關(guān)鍵點進(jìn)行打點，鼠標(biāo)移動到關(guān)鍵點時能夠查看當(dāng)前用戶設(shè)置的圖片等標(biāo)注信息。更多信息，請參見進(jìn)度打點組件。

字幕

用于快速切換不同語言的字幕。更多信息，請參見字幕組件。

音軌

用于切換不同版本的音軌。更多信息，請參見音軌組件。

引入組件

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

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

   說明

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

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

   說明

   本文僅提供示例代碼，不同組件細(xì)節(jié)不同，需要具體配置。

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

組件使用

當(dāng)只需要單獨的某個組件時，只需要引用對應(yīng)組件的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

• 打包自定義組件

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

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

  說明

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

  • AliplayerDanmu：彈幕組件

  • BulletScreen：跑馬燈組件

  • MemoryPlay：記憶播放組件

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

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

  • Playlist：播放列表組件

  • Preview：試看組件

  • RotateMirror：旋轉(zhuǎn)鏡像組件

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

  • Staticad：靜態(tài)廣告（圖片）組件

  • 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	組件的參數(shù)

  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方法獲取實例組件，參數(shù)為組件的名字。

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

安裝依賴項

$ cd customComponents
$ npm install