阿里云移动端播放器高级功能---UI播放器

简介: 用户想要实现一个视频播放除了要集成我们播放器SDK之外,还需要做一些UI交互的东西。要实现一个完整的视频播放还是需要做很多工作的。那么我们提供了一套完整的UI播放器,用户可以非常快速的集成进去来实现完整的播放器功能。

基本介绍

用户想要实现一个视频播放除了要集成我们播放器SDK之外,还需要做一些UI交互的东西。要实现一个完整的视频播放还是需要做很多工作的。那么我们提供了一套完整的UI播放器,用户可以非常快速的集成进去来实现完整的播放器功能。最重要的是目前UI播放器已经开源。

那么,完整的UI播放器包括哪些功能呢?
003cc5d5dadf76d1eb0775c4bc23c06f94d73c7d

包括亮度控制、音量控制、清晰度切换、进度条、时间显示、全屏、标题、倍数、快进快退等控制。基本上和目前市面上主流的视频APP是类似的。

主要特色  

支持换肤

目前换肤提供几种颜色的风格,可以选择,具体如下:

/*
 功能:初始化界面皮肤
 备注:默认皮肤为蓝色
 */
@property (nonatomic, assign) AliyunVodPlayerViewSkin viewSkin;

typedef NS_ENUM (int, AliyunVodPlayerViewSkin) {
    AliyunVodPlayerViewSkinBlue = 0,
    AliyunVodPlayerViewSkinRed,
    AliyunVodPlayerViewSkinOrange,
    AliyunVodPlayerViewSkinGreen
};

支持多语言

我们将语言单独放到了一个bundle中,目前支持英文和中文,也可以添加其他的语言翻译到bundle中。
image.png

使用简单

将UI播放器单独封装成了一个view,使用的时候只需要将view添加到用户的界面中即可。

/****************UI播放器集成**********************/
self.playerView = [[AliyunVodPlayerView alloc] initWithFrame:CGRectMake(0,topHeight, width, height) andSkin:AliyunVodPlayerViewSkinRed];
self.playerView.circlePlay = YES;

//加入到界面中
[self.view addSubview:self.playerView];

//设置播放源
[self.playerView playViewPrepareWithURL:self.config.videoUrl];

UI播放器实现  

下面以Android为例,来简单介绍下UI播放器是如何实现的

view的层级关系

9d2c9546a883ef5dd4567f7dce2fdec8e11440a6

TipsView

       提示view,继承RelativeLayout, 实现ITheme接口。主要用于显示提示信息。比如:网络变化的提示,错误的提示,播放结束的提示等。这些提示也是一个view,被添加到TipsView中。将会显示在TipsView的CENTER位置。

GuideView

        用户引导View。主要在横屏的时候,首次使用的话,提示用户的手势操作。复写了onTouchEvent事件,触摸这个view的时候将会隐藏。

SpeedView

倍速播放切换View。主要用于切换倍速。SpeedView中有个子View ,叫mMainSpeedView。主体界面就是这个界面。

ControlView

播放器的控制栏。这个界面上包含了标题栏,操作栏,锁屏按钮等等。可以对播放器进行暂停,播放。seek等操作。

QualityView

显示清晰度的列表view。

GestureView

手势控制的view。通过

GestureDetector  +  OnGestureListener

实现。

CoverView

封面view。

SurfaceView

播放view。也可以替换为TextureView。  但是可能会引发:倍速播放的时候,画面更新不及时的问题。因为SurfaceView有双缓冲,而TextureView就是一个view。画面刷新性能有不同。

整体架构的模式

整体采用类MVC的结构。

M: 数据层。

     在VodPlayerView中,数据的信息,都是由播放器提供的。通过调用播放器提供的API,比如getCurrentPosition获取当前的播放位置。

V:界面层。

 界面层,在上文中已经详细的分析了。view的作用就是用来展示界面,**完全不涉及业务逻辑**。画面的变化和更新,也是完全不是自己控制的。都是由P层,也就是控制层去控制的。

C:控制层。

控制层,其实是在VodPlayerView的类中实现的。在这里,VodPlayerView其实就当做一个View的承载器和业务逻辑的控制器。<br />     View的承载功能,是为了能够在XML和代码中能够使用这个view。业务逻辑的控制功能则是它更核心的功能。<br />     比如与播放的控制交互。上面的界面分析中:播放器的ControlView负责了界面上暂停,播放,seek等的操作。业务逻辑与view的分离是通过接口的回调实现的。
目录
相关文章
|
1月前
|
存储 弹性计算 大数据
阿里云服务器怎么样?云服务器ECS功能、租用费用全解析
阿里云ECS是弹性计算服务,提供安全可靠的云服务器,包括多种实例规格如经济型、通用型、计算型等,适合不同场景。ECS支持VPC专有网络、快照与镜像、多种付费模式。用户可按需选择计算架构、存储类型,享受灵活的网络控制、自动化数据备份和低成本计算资源。适用于Web应用、在线游戏、大数据分析和深度学习等场景。阿里云提供免费试用和优惠价格,服务众多知名企业,如新浪微博。
106 5
|
1月前
|
存储 弹性计算 大数据
阿里云服务器怎么样?全访问解析云服务器ECS功能、租用、优缺点及使用说明
阿里云ECS是弹性计算服务,提供安全可靠的云服务器,包括多种实例规格如经济型、通用型、计算型等,适合不同场景。ECS支持VPC专有网络、快照与镜像、多种付费模式。用户可根据业务需求选择实例、存储类型和网络配置。阿里云服务器适用于Web应用、游戏、大数据和深度学习等场景,提供免费试用和不同优惠套餐。众多知名企业如新浪微博等信赖阿里云服务。更多信息可访问阿里云官方网站。
121 5
|
2月前
|
文字识别 算法
印刷文字识别产品使用合集之开通了阿里云发票识别验真功能,其他人可以调用我的这个接口吗
印刷文字识别产品,通常称为OCR(Optical Character Recognition)技术,是一种将图像中的印刷或手写文字转换为机器编码文本的过程。这项技术广泛应用于多个行业和场景中,显著提升文档处理、信息提取和数据录入的效率。以下是印刷文字识别产品的一些典型使用合集。
|
16天前
|
监控 安全 人机交互
阿里云RPA有哪些功能?
【8月更文挑战第4天】阿里云RPA有哪些功能?
33 2
|
3天前
|
负载均衡 Cloud Native 容灾
阿里云负载均衡SLB价格_ALB、NLB和CLB区别_负载均衡功能和使用场景说明
阿里云负载均衡SLB分为应用型ALB、网络型NLB及传统型CLB。ALB与NLB仅支持按量付费,而CLB则提供包年包月和按量付费选项。ALB专长于7层HTTP/HTTPS/QUIC协议处理,支持丰富的内容路由功能;NLB聚焦于4层TCP/UDP/TCPSSL协议,擅长处理大规模并发连接。两者均基于NFV技术,支持自动弹性伸缩,并与云原生环境如ACK/SAE/K8S深度集成。此外,SLB提供多协议支持、多级容灾、安全防护等功能,确保服务的高可用性和安全性。具体收费方面,ALB的基础版实例费为0.049元/小时起,NLB实例费限时免费,两者还需支付性能容量单位LCU费及公网网络费(仅公网实例)
|
1月前
|
监控 数据可视化 算法
通过阿里云百炼的流程管理功能,搭建一个专属的流程能力
阿里云百炼平台结合流程画布与智能体,实现业务流程自动化。通过拖拽配置节点、对接智能体应用,确保数据交互与调度。智能体动态调度提升效率,提供可视化监控。但学习成本、性能优化、错误处理和兼容性是挑战。
197 6
|
5天前
|
安全 分布式数据库 数据安全/隐私保护
阿里云EMR数据湖文件系统问题之JindoFS支持Snapshot功能的问题如何解决
阿里云EMR数据湖文件系统问题之JindoFS支持Snapshot功能的问题如何解决
|
1月前
|
人工智能 监控 机器人
在阿里云百炼平台上,利用流程管理功能搭建专属流程能力的评测报告
在阿里云百炼平台上,利用流程管理功能搭建专属流程能力的评测报告如下:
|
1月前
|
编解码 Android开发 iOS开发
|
1月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
32 1

热门文章

最新文章