阿里雲 Aliplayer高級功能介紹(六)：進度條標記

基本介紹
Aliplayer在進度條上提示時間和縮略圖功能外，還能夠進行視頻內容的提示打點，固然不止是進度條上顯示打點的內容，還提供一組接口，方便用戶進行打點時間和內容的獲取， 基本UI以下圖所示：

接口和屬性介紹
播放器提供了progressMakers屬性，是一個數組類型，每一條記錄包含offset時間和text打點的內容，還能夠包含其餘屬性，此屬性用於告訴播放器進度條打點記錄，記錄內容屬性說明：

名稱 類型 說明
offset Number 打點的視頻偏移時間，單位：秒
text String 打點的文本信息,默認UI會使用
isCustomized Boolean 是否使用默認UI，不使用設置爲true
事件
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播放器方式時， 自動從雲端獲取打點的內容顯示在進度條上， 播放時用戶無需關心此視頻是否有打點，用戶使用此功能時更簡單和方便。