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

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

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

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

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

自定义组件的原理?

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

每个阶段的说明:

组件系统特点:

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

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

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

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

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

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

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

b. 使用Aliplayer提供的Component方法

2. 如何启用组件

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

启用组件

3. 如何获取组件

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

目前,Aliplayer已经实现了8个常用的组件,并且开源于github,用户可以获取实现的代码,并且也可以贡献自己的代码和建议。

记忆播放

开始广告

暂停广告

播放下一个

播放列表

旋转和镜像

视频广告

弹幕

试看

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

Aliplayer体验馆:

https://player.alicdn.com/ali...

Aliplayer Github:

https://github.com/aliyunvide...

本文作者:樰篱

阅读原文

本文为云栖社区原创内容,未经允许不得转载。

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

  1. 第一章 基础设施,1.3 阿里视频云ApsaraVideo是怎样让4000万人同时狂欢的(作者:蔡华)

    1.3 阿里视频云ApsaraVideo是怎样让4000万人同时狂欢的 前言 在今年的双11中,双11天猫狂欢夜的直播成为一大亮点. 根据官方披露数据,直播总观看人数超4257万,同时观看人数峰值达5 ...

  2. H5播放器内置播放视频(兼容绝大多数安卓和ios)

    关于H5播放器内置播放视频,这个问题一直困扰我很长一段时间,qq以前提供白名单已经关闭,后来提供了同层属性的控制,或多或少也有点差强人意. 后来一次偶然发现一个非常简单的方法可以实现. 只需要给vid ...

  3. 【Android】利用安卓的数据接口、多媒体处理编写内存卡Mp3播放器app

    通过调用安卓的MediaPlayer能够直接完毕Mp3等主流音频的播放,同一时候利用ContentResolver与Cursor能够直接读取安卓内在数据库的信息.直接获取当前sdcard中全部音频的列 ...

  4. 网页播放音频、视频文件——基于web的html 5的音乐播放器(转载)

    文章转载自:开源中国社区 [http://www.oschina.net] 想通过手机客户端(支持 Android.iPhone 和 Windows Phone)访问开源中国:请点这里 HTML5 是 ...

  5. 阿里云web播放器

    原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...

  6. 一步步实现windows版ijkplayer系列文章之二——Ijkplayer播放器源码分析之音视频输出——视频篇

    一步步实现windows版ijkplayer系列文章之一--Windows10平台编译ffmpeg 4.0.2,生成ffplay 一步步实现windows版ijkplayer系列文章之二--Ijkpl ...

  7. phpcms视频模块实现列表页打开内容页直接播放视频

    摘自phpcms论坛 原链接地址:http://bbs.phpcms.cn/thread-557691-1-1.html 之前下载研究过“化蝶自在飞”开发的视频模型,发现功能不错,但唯一的缺憾是,我想 ...

  8. 利用阿里云如何开发一款直播app?

    在开发的过程中应该注意些什么?下面让小编告诉你: 随着互联网的发展,越来越多的人已经加入互联网的行列.而且很多的人也开始直播,和众多的网友分享自己身边事情.互联网还在加速发展,从PC互联网,到移动互联 ...

  9. 阿里云视频云正式支持AV1编码格式 为视频编码服务降本提效

    今天我们要说的 AV1 可不是我们平时说的 .AVI 文件格式,它是由AOM(Alliance for Open Media,开放媒体联盟)制定的一个开源.免版权费的视频编码格式,可以解决H.265昂 ...

随机推荐

  1. Linux-部署ftp

    通过外部window ftp 客户端 访问linux 有两种方法 方法一:Linux系统未安装vsftp 服务 这个是本人使用的ftp客户端的版本号 启动ftp客户端,填写ip ,账号,密码 问题:当 ...

  2. python+selenium元素定位之CSS学习02

    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...

  3. eclipse中常用的快捷键【开发常用到的】

    1.全部选中:Ctrl+A 2.剪切Ctrl+X.复制Ctrl+C.粘贴Ctrl+V.保存Ctrl+S 3.撤销Ctrl+Z.取消撤销Ctrl+Y 4.规范代码:Ctrl+Shift+F 5.将代码更 ...

  4. Vue.js 源码学习笔记

    最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...

  5. Tunnel Warfare HDU 1540 区间合并+最大最小值

    Tunnel Warfare HDU 1540 区间合并+最大最小值 题意 D x是破坏这个点,Q x是表示查询以x所在的最长的连续的点的个数,R是恢复上一次破坏的点. 题解思路 参考的大佬博客 这里 ...

  6. jdk 1.7 新增

    二进制整数 JDK7提供了二进制整数的类型,只要以0b开头即可.int a = 0b0101; 下划线分隔符 针对特别长的数字,读懂它令人头疼,这时候用下划线分割数字,可增加代码可读性.long a ...

  7. SCUT - 131 - 小P玩游戏II - 贪心 - 平衡树

    https://scut.online/p/131 首先假如钦定了一群人去打怪兽,那么可以把主要的任务都丢给b最大的人去打,这样不会更差.然后考虑枚举这个b最大的人,其他人陪练.一开始就是ai+k*b ...

  8. 重磅 | Elasticsearch7.X学习路线图

    原文:重磅 | Elasticsearch7.X学习路线图 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.c ...

  9. Storm分布式集群搭建

    一.storm版本 选用storm0.9.6 二.本地模式 用于对storm业务逻辑的调试和测试,可以直接在本地运行. 三.分布式模式 生产环境,需要对应的zookeeper.nimbus.super ...

  10. hibernate.hbm.xml配置文件解析

    转自:https://www.cnblogs.com/uoar/p/6670612.html 1. <!DOCTYPE hibernate-mapping PUBLIC "-//Hib ...