基本介紹

Aliplayer在進度條上提示時間和縮圖功能外，還可以進行視訊內容的提示打點，當然不止是進度條上顯示打點的內容，還提供一組介面，方便使用者進行打點時間和內容的獲取， 基本UI如下圖所示：

介面和屬性介紹

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

事件

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

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

 });

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

相關介面

為了方便打點內容的編輯提供了下面的介面：

功能使用

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

打點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();
    }
 }

播放顯示打點

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

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

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

自定義打點內容

Aliplayer預設打點的UI只顯示文字， 如果需要顯示其他的內容比如圖片，並且UI需要自定義時，可以通過Aliplayer提供的自定義元件實現不同的打點UI，比如我要實現下面的自定義UI：

自定義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;
    }

應用自定義打點元件

可以通過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}],
    progressMakers:[
        {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("播放器建立成功");
  });

使用點播服務

後續點播服務會提供API，方便使用者儲存打點的內容到點播服務， Aliplayer會在使用者使用videoId播放器方式時， 自動從雲端獲取打點的內容顯示在進度條上， 播放時使用者無需關心此視訊是否有打點，使用者使用此功能時更簡單和方便。