阿里云 Aliplayer高级功能介绍(六):进度条标记

简介: 基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: 接口和属性介绍 播放器提供了progressMarkers属性,是一个数组类型,每一条记录包含o.

基本介绍

Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示:

fb725a7d4f5ac9c5c5ac1fa1aec73d06f780d406

接口和属性介绍

播放器提供了progressMarkers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说明:

名称 类型 说明
offset Number 打点的视频偏移时间,单位:秒
text String 打点的文本信息,默认UI会使用
isCustomized Boolean 是否使用默认UI,不使用设置为true

事件

Aliplayer提供两个事件:鼠标进入进度条上的打点和鼠标离开进度条上的打点。

//鼠标进入进度条上的打点
player.on('markerDotOver', function(data) {
     let params = data.paramData,
     progressMarkers = params. progressMarkers, //打点记录信息
     left = params.left; //打点的离播放器左边的距离

 });

//鼠标离开进度条上的打点
player.on('markerDotOut', function() {
});

相关接口

为了方便打点内容的编辑提供了下面的接口:

接口名称 参数 说明
enterProgressMarker 播放器进入打点编辑状态,在seek操作完成时,不会播放视频
exitProgressMarker 播放器退出打编辑状态,在seek操作完成时,会继续播放视频
isInProgressMarker 是否是打点编辑状态
getProgressMarkers 获取打点数组

功能使用

下面会介绍播放器如何辅助用户进行打点信息的生成和维护。

打点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,
    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("播放器创建成功");
  });

这样进度条上就会有打点的标记, 鼠标放上去就会显示打点的内容:

70b0ba7fb5e8c12b4b54237ea97c0f99565fd614

自定义打点内容

Aliplayer默认打点的UI只显示文本, 如果需要显示其他的内容比如图片,并且UI需要自定义时,可以通过Aliplayer提供的自定义组件实现不同的打点UI,比如我要实现下面的自定义UI:

359de562ac1b0dc14f288887f2779da82c9daa19

自定义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}],
    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("播放器创建成功");
  });

使用点播服务

后续点播服务会提供API,方便用户保存打点的内容到点播服务, Aliplayer会在用户使用videoId播放器方式时, 自动从云端获取打点的内容显示在进度条上, 播放时用户无需关心此视频是否有打点,用户使用此功能时更简单和方便。

目录
相关文章
|
移动开发 Android开发 HTML5
uniapp视频播放功能
uniapp视频播放功能
1203 0
|
视频直播
【视频直播篇五】vue-cli3集成vue-aliplayer-v2
本文着重介绍vue-cli3集成vue-aliplayer-v2
768 0
|
Web App开发 移动开发 JavaScript
【视频直播篇一】入门篇
公司产品要集成视频直播,原来找的一家第三方厂家已经对接好了,后来领导说成本太高要换。拿到同行的产品来看,发现他们用的是rtmp协议的直播流。领导说要上这个,把这个任务交给我,当时都蒙圈了。这啥玩意?!从来没见过啊。领导的话就是命令,没办法,硬着头皮也要上。 花了几天时间稍微入了门,在这里总结一下。 首先直播中有两个非常重要的概念:推流、拉流。通俗来讲,推流指的就是我们在直播平台看到的主播那一端采集摄像头数据推送到视频流服务器。而拉流就是观众这一段使用pc、移动端播放直播视频了。
702 0
|
JavaScript Android开发 iOS开发
vue-aliplayer 阿里云播放器适配 vue
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766824 ...
14787 0
|
11月前
|
机器学习/深度学习 自然语言处理 算法
视频字幕自动生成
8月更文挑战第12天
496 2
阿里云 Aliplayer高级功能介绍
Aliplayer除了一些基本功能,还有一些高级的功能,可能需要云端配合才可以使用,或者播放器本身需要做更多的配置,希望写一些文件介绍如何使用和介绍一下简单的实现原来,让用户了解这些功能,更好的使用播放器,文章不仅介绍内置的功能,还会包含通过插件写的其他功能。
38064 0
|
视频直播
【视频直播篇七】Aliplayer的使用
本文着重介绍Aliplayer的使用
1465 0
|
视频直播 内存技术
【视频直播篇三】vue-cli3集成vue-video-player
本文着重介绍vue-cli3集成vue-video-player
657 0
|
存储 对象存储
利用阿里云智能媒体服务制作视频字幕
智能媒体服务IMS(Intelligent Media Services)生产制作中心支持多轨剪切拼接、混音、字幕、图片叠加、遮标、转场特效、智能字幕、绿幕抠图等一系列功能,本文主要介绍如何如何利用智能媒体服务制作视频字幕。
|
运维 Java API
OSS生成m3u8文件动态签名
针对对象存储OSS私有bucket权限的使用场景,每个object都需要生成一次签名URL。针对m3u8的索引文件,索引里的每一个ts都需要生成一次签名地址。这里提供一个通过m3u8设置header带到签名里,从而实现获取的ts带签名的方法。
5824 0
OSS生成m3u8文件动态签名