阿裡雲 Aliplayer進階功能介紹(六)：進度條标記基本介紹 接口和屬性介紹 事件 使用點播服務

基本介紹

Aliplayer在進度條上提示時間和縮略圖功能外，還可以進行視訊内容的提示打點，當然不止是進度條上顯示打點的内容，還提供一組接口，友善使用者進行打點時間和内容的擷取， 基本UI如下圖所示：

https://www.atatech.org/articles/129111#1 接口和屬性介紹

播放器提供了progressMarkers屬性，是一個數組類型，每一條記錄包含offset時間和text打點的内容，還可以包含其他屬性，此屬性用于告訴播放器進度條打點記錄，記錄内容屬性說明：

名稱	類型	說明
offset	Number	打點的視訊偏移時間，機關：秒
text	String	打點的文本資訊,預設UI會使用
isCustomized	Boolean	是否使用預設UI，不使用設定為true

https://www.atatech.org/articles/129111#2 事件

Aliplayer提供兩個事件：滑鼠進入進度條上的打點和滑鼠離開進度條上的打點。

//滑鼠進入進度條上的打點
player.on('markerDotOver', function(data) {
     let params = data.paramData，
     progressMarkers = params. progressMarkers, //打點記錄資訊
     left = params.left; //打點的離播放器左邊的距離

 });

//滑鼠離開進度條上的打點
player.on('markerDotOut', function() {
});

           

https://www.atatech.org/articles/129111#3 相關接口

為了友善打點内容的編輯提供了下面的接口：

接口名稱	參數
enterProgressMarker	無	播放器進入打點編輯狀态，在seek操作完成時，不會播放視訊
exitProgressMarker		播放器退出打編輯狀态，在seek操作完成時，會繼續播放視訊
isInProgressMarker		是否是打點編輯狀态
getProgressMarkers		擷取打點數組

https://www.atatech.org/articles/129111#4 功能使用

下面會介紹播放器如何輔助使用者進行打點資訊的生成和維護。

https://www.atatech.org/articles/129111#5 打點Seek操作

使用者在生成打點内容的時候，希望在seek操作時，視訊不要播放，這時候就需要讓播放器進入打點編輯狀态，并且在seek完成時，能夠得到目前seek到的時間，這樣就可以進行時間和内容對應關系的編輯。

建立播放器時，訂閱completeSeek事件，代碼如下：

player.on('completeSeek',function(e){
      console.log('seek完成：'+ e.paramData);
      //seek完成：：12.875738146938774 機關為秒
 });
           

如果希望seek結束時畫面時靜止的，使用的代碼如下：

<button click="switchProgressMarker()">開始打點</button>
           

var switchProgressMarker = ()=>{
    if(!player.isInProgressMarker())
    {   //如果為進入編輯狀态，調用enterProgressMarker
       player.enterProgressMarker();
    }
    else
    {
       //如果為已經是編輯狀态，調用exitProgressMarker退出
       player.exitProgressMarker();
    }
 }
           

https://www.atatech.org/articles/129111#6 播放顯示打點

打點資訊通過在建立播放器的時候傳給播放器，代碼如下：

var player = new Aliplayer({
    id: "player-con",
    source: "//common.qupai.me/player/qupai.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    progressMarkers:[
       {offset:0,text:'阿裡視訊雲端到雲到端服務的重要一環'},
       {offset:10,text:'除了支援點播和直播的基礎播放功能外'},
       {offset:20,text:'深度融合視訊雲業務'},
       {offset:30,text:'為使用者提供簡單、快速、安全、穩定的視訊播放服務'},
       {offset:40,text:'安裝播放器Demo進行體驗'},
       {offset:50,text:'開發人員請點選SDK下載下傳'}
    ],
  }, function (player) {
    console.log("播放器建立成功");
  });
           

這樣進度條上就會有打點的标記， 滑鼠放上去就會顯示打點的内容：

https://www.atatech.org/articles/129111#7 自定義打點内容

Aliplayer預設打點的UI隻顯示文本， 如果需要顯示其他的内容比如圖檔，并且UI需要自定義時，可以通過Aliplayer提供的自定義元件實作不同的打點UI，比如我要實作下面的自定義UI：

https://www.atatech.org/articles/129111#8 自定義UI

通過Aliplayer提供的自定義元件的模式實作打點内容的顯示UI，自定義元件裡新增了markerDotOver、markerDotOut的hooker鈎子，打點元件的代碼實作如下：

var ProgressMarkerComponent = Aliplayer.Component({
    createEl:function(el)
    {
       let htmlString = "<div class='progress-marker-container'>"+
                           "<img class='marker-img'></img>"+
                           "<div class='marker-text'></div>"+
                        "</div>";
        this.container = $(htmlString);
        $(el).append(this.container);
    },
    markerDotOver:function(player,data)
    {
       let progressMarker = data.progressMarker;
       this.container.find('.marker-img').attr('src', progressMarker.imgUrl);
       this.container.find('.marker-text').text(progressMarker.text);
       this.container.css('left',data.left*100 + "%");
       this.container.css('display','flex');
    },
    markerDotOut:function(player,data)
    {
       this.container.css('display','none');
    }
  });
           

對應的CSS：

.progress-marker-container
    {
      position: absolute;
      width: 210px;
      height: 80px;
      display: none;
      justify-content: flex-start;
      align-items: center;
      color: #ffffff;
      bottom: 55px;
      background: rgba(0, 0, 0, 0.8);
    }

    .progress-marker-container .marker-img
    {
      width: 80px;
      height: 80px;
    }

    .progress-marker-container .marker-text
    {
      text-align: center;
      word-break: break-all;
    }
           

https://www.atatech.org/articles/129111#9 應用自定義打點元件

可以通過progressMarkers屬性可以傳除文本外的其他屬性，在markDotOver事件發生時，會把對應的記錄通過回調參數傳回，并且通過components屬性應用上面的ProgressMarkerComponent元件，代碼如下：

var player = new Aliplayer({
    id: "player-con",
    source: "//common.qupai.me/player/qupai.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    components:[{name:'progressMarkerComponent',type:ProgressMarkerComponent}],
    progressMarkers:[
        {offset:0,isCustomized:true,text:'阿裡視訊雲端到雲到端服務的重要一環',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
        {offset:10,isCustomized:true,text:'除了支援點播和直播的基礎播放功能外',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
        {offset:20,isCustomized:true,text:'深度融合視訊雲業務',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
        {offset:30,isCustomized:true,text:'為使用者提供簡單、快速、安全、穩定的視訊播放服務',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
        {offset:40,isCustomized:true,text:'安裝播放器Demo進行體驗',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'},
        {offset:50,isCustomized:true,text:'開發人員請點選SDK下載下傳',imgUrl:'http://player.alicdn.com/demo/h5live/images/avatar.jpg'}
    ],
  }, function (player) {
    console.log("播放器建立成功");
  });

           

https://www.atatech.org/articles/129111#10 使用點播服務

後續點播服務會提供API，友善使用者儲存打點的内容到

點播服務

， Aliplayer會在使用者使用videoId播放器方式時， 自動從雲端擷取打點的内容顯示在進度條上， 播放時使用者無需關心此視訊是否有打點，使用者使用此功能時更簡單和友善。