开发者社区> EdgePlus> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

如何利用阿里视频云开源组件,快速自定义你的H5播放器?

简介: Aliplayer希望提供一种方便、简单、灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己App server的交互等等,而不用从头开始开发一些功能,节省时间和精力。
+关注继续查看

阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放、安全下载、首屏秒开、低延时等业务场景,为用户提供简单、快速、安全、稳定的视频播放服务。

image

Aliplayer Web播放器分为H5和Flash两个,Flash播放器随着技术的发展会逐渐被边缘化,而H5播放器会更加普及。播放器端上已经实现了截图、国际化、变速、UI自定义、微信同层播放、自适应播放、加密播放、H5播放flv、自定义插件等功能。

虽然Aliplayer已经具备相对完善的公共基础能力,但是用户会有一些更上层和业务相关的一些需求,并且基于用户本身的需求都会存在个性化差异,比如弹幕、跑马灯、视频列表等等。

因此,Aliplayer希望提供一种方便、简单、灵活的机制,让客户能够扩展播放器的功能,并且Aliplayer提供一些组件的基本实现,用户可以基于这些开源的组件实现个性化功能,比如自定义UI和自己App server的交互等等,而不用从头开始开发一些功能,节省时间和精力。所以,支持自定义的新版Aliplayer应运而生。

自定义组件的原理?

Aliplayer希望有一种很简单的方式去定义组件,让用户的学习成本近乎于零。因此定义出整个播放器的生命周期的重要阶段,作为函数钩子,用户可以通过函数钩子实现每个阶段的自定义逻辑,下面的图列出了主要生命周期,标示在函数的周期内会发生的一些阶段:

image

每个阶段的说明:

名称 说明
init new 实例的时候调用,设置的初始参数在构建对象时,会传递给init方法
createEl 创建组件的UI, 参数为播放器容器的div
created 播放器创建完成,可以调用播放器的API了
ready 视频可播放状态
play 开始播放
pause 播放暂停
playing 正在播放
waiting 等待数据
timeupdate 播放事件改变,通过第二各参数的timestamp属性得到播放时间
error 播放出错
ended 播放结束
dispose 播放器销毁

组件系统特点:

1、 实现简单:用户只要有前端的基本知识,就可以开发一个插件,并且支持ES5和ES6的语法,只要定义一个Function或者Class,根据自己的业务需要实现生命周期函数。

2、 实例的:组件注册到播放器,在播放创建的过程中也创建组件实例,组件是可以保存状态的,因此一个组件定义,可以注册多个到播放器,通过传递不通的参数,构建不同的组件,具有不同的行为。

3、 开源的:每个开源组件都包含了通用的基本功能,用户可以在开源的基础上实现自己的个性化需求,给用户更大的自主权。

组件的实现方式,用户如何快速自定义开发?

1. 组件提供了两种方式让用户去开发自己的播放器组件:

a. ES6的class类型定义一个组件

当您的项目是使用ES6的语法,通过webpack或者babel构建时,建议使用这种方式。

/**
* 静态广告组件
*/
export default class StaticADComponent
{
    /**
    * 构造函数,在new对象时调用
    *
    * @param {string} adAddress - 广告视频地址
    * @param {string} toAddress - 广告链接地址
    */
    constructor(adAddress,toAddress) {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    }
    
    /**
    * 创建广告Dom元素
    */
    createEl(el)
    {
      this.$html.find('.ad').attr('src',this.adAddress);
      this.$html.attr('href',this.toAddress);
      let $adWrapper = this.$html.find('.ad-wrapper');
      $adWrapper.attr('href',this.toAddress);
      $adWrapper.click(()=>{
        Aliplayer.util.stopPropagation();
      });
      this.$html.find('.close').click(()=>{
        this.$html.hide();
      });
      $(el).append(this.$html);
    }
    
    /**
    * 隐藏广告
    */
    play(player,e)
    {
       this.$html.hide();
    }
    
    /**
    * 显示广告
    */
    pause(player,e)
    {
       this.$html.show();
    }

    /**
    * 隐藏广告
    */
    playing(player,e)
    {
       this.$html.hide();
    }
    
    /**
    * 显示广告
    */
    ended(player,e)
    {
      this.$html.show();
    }
}

b. 使用Aliplayer提供的Component方法

/**
  * 静态广告组件
  */
 const StaticADComponent = Aliplayer.Component({
    /**
    * 初始函数,在new对象时调用
    *
    * @param {string} adAddress - 广告视频地址
    * @param {string} toAddress - 广告链接地址
    */
    init:function(adAddress,toAddress)
    {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    },

    /**
    * 创建广告Dom元素
    */
    createEl:function(el)
    {
      this.$html.find('.ad').attr('src',this.adAddress);
      var $adWrapper = this.$html.find('.ad-wrapper');
      $adWrapper.attr('href',this.toAddress);
      $adWrapper.click(function(){
        Aliplayer.util.stopPropagation();
      });
      this.$html.find('.close').click(function(){
        this.$html.hide();
      });
      $(el).append(this.$html);
    },
    ready:function(player,e)
    {
    },
    /**
    * 隐藏广告
    */
    play:function(player,e)
    {
       this.$html.hide();
    },
    /**
    * 显示广告
    */
    pause:function(player,e)
    {
       this.$html.show();
    },
    /**
    * 隐藏广告
    */
    playing:function(player,e)
    {
       this.$html.hide();
    },
    waiting:function(player,e)
    {
    },
    timeupdate:function(player,e)
    {
    },
    error:function(player,e)
    {
    },
    /**
    * 显示广告
    */
    ended:function(player,e)
    {
      this.$html.show();
    }
});

2. 如何启用组件

播放器提供了components属性,通过给components赋值,让播放器使用组件,此属性的类型为Array,如果组件创建是构造函数没有初始参数,直接把组件类型作为值,比如:components :[staticADComponent],否则通过对象字面量的形式指定类型和参数,参数也是一个数组,比如: components :[{type:staticADComponent,args:[1,2]}],如果需要获取实例的组件,需要设置name属性。

名称 说明
name 组件名称,可用通过名称得到组件
type 组件类型
args 组件的参数

启用组件

var player = new Aliplayer({
    id: "J_prismPlayer",
     autoplay: true,
     playsinline:true,
     components:[
     {type:StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png']},
     {name:'adcomponent',type:StaticAdComponent}
     ]                 
    });



3. 如何获取组件

有的场景下,需要获取组件做一下事情,比如调用组件里的方法,这时可以通过播放器的getComponent方法获取,参数为组件的名字。

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

目前,Aliplayer已经实现了8个常用的组件,并且开源于github,用户可以获取实现的代码,并且也可以贡献自己的代码和建议。
记忆播放
开始广告
暂停广告
播放下一个
播放列表
旋转和镜像
视频广告
弹幕
试看

如果用户实现了Aliplayer的组件,并且想贡献出来,可以联系我们,我们会在github首页添加导航,链接到您的github项目上。

Aliplayer体验馆:

https://player.alicdn.com/aliplayer/presentation/index.html

Aliplayer Github:

https://github.com/aliyunvideo/AliyunPlayer_Web

如需咨询视频SDK相关问题,可以加入钉钉群:11759425

活动推荐

12月20日杭州站【云栖TechDay-音视频技术实战沙龙】,多位视频云专家现场解读短视频、直播、视频AI、视频加速技术实践,点击了解活动详情及免费报名

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何将照片或者视频中的背景图抠掉,机器学习开源项目使用 | 机器学习
如何将照片或者视频中的背景图抠掉,机器学习开源项目使用 | 机器学习
71 0
数字农业WMS库存操作重构及思考
数字农业库存管理系统在2020年时,部门对产地仓生鲜水果生产加工数字化的背景下应运而生。项目一期的数农WMS中的各类库存操作均为单独编写。而伴随着后续的不断迭代,这些库存操作间慢慢积累了大量的共性逻辑:如参数校验、幂等性控制、操作明细构建、同步任务构建、数据库操作CAS重试、库存动账事件发布等等……大量重复或相似的代码不利于后续维护及高效迭代,因此我们决定借鉴并比较模板方法(Template Method)和回调(Callback)的思路进行重构:我们需要为各类库存操作搭建一个统一的框架,对其中固定不变的共性逻辑进行复用,而对会随场景变化的部分提供灵活扩展的能力支持。
203 0
CCCF专栏 | 加密数据库技术:前沿与展望
本文将从数据安全防护的重大战略需求出发,聚焦数据安全搜索、加密数据库技术等前沿领域,深入探讨加密数据库的发展现状,揭示其设计过程中存在的安全性和性能方面的挑战,并提出未来关于加密数据库建设的一些愿景。
298 0
袋鼠云数据中台专栏(二) :数据资源规划与获取
数据资源规划是数据治理,数据建模,数据资产管理,数据指标体系规范等工作的前置环节和必要条件,因此数据资源规划的作用至关重要,包括数据资源梳理、数据资源规划实施、数据资源可视化、数据资源分析报告四部分内容。
7679 0
CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理
我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端页面各种适应,做到重复利用。
946 0
+关注
EdgePlus
阿里云产品运营,专注边缘计算和视频云产品与技术传播
528
文章
59
问答
来源圈子
更多
+ 订阅
相关文档: 安全加速 SCDN PCDN CDN
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载