阿里云移动端播放器高级功能---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的分离是通过接口的回调实现的。
目录
相关文章
|
27天前
|
开发者
移动端UI名词 - AxureMost
该文档介绍了多种UI组件的分类和功能,包括按钮、图标、宫格等基础组件,头像、徽标、轮播图等数据展示类组件,复选框、日期选择器、输入框等数据输入类组件,以及对话框、加载、消息通知等反馈类组件。此外,还涵盖了下拉菜单、导航栏、分页器等导航类组件。每个组件都有具体的应用场景和作用,帮助开发者快速构建界面。
|
4月前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
213 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
6月前
|
搜索推荐 前端开发 C#
推荐7款美观且功能强大的WPF UI库
推荐7款美观且功能强大的WPF UI库
354 2
|
8月前
|
编解码 Android开发 iOS开发
|
7月前
|
图形学
小功能⭐️Unity获取点击到的UI
小功能⭐️Unity获取点击到的UI
|
7月前
|
图形学
小功能⭐️Unity判断是否单击到了UI
小功能⭐️Unity判断是否单击到了UI
|
7月前
|
图形学
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
小功能⭐️不用传参,Unity获得鼠标悬浮处的物体、UI!
|
7月前
|
图形学
小功能⭐️解决Unity 3D UI遮挡穿透问题
小功能⭐️解决Unity 3D UI遮挡穿透问题
|
7月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
123 0
|
8月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
182 1

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
  • 3
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 4
    如何在React.js中使用Shadcn/UI
  • 5
    移动端UI名词 - AxureMost
  • 6
    unity判断鼠标在不在UI上
  • 7
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
  • 8
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
  • 9
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
  • 10
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 1
    如何在React.js中使用Shadcn/UI
    73
  • 2
    Flame:开源AI设计图转代码模型!生成React组件,精准还原UI+动态交互效果
    91
  • 3
    WEB CAD插件通过上下文对象MxPluginContext修改UI界面的方法
    18
  • 4
    FirstUI:Deepseek能帮我们做很多事情,而这款开源框架专为开发者设计的开源UI框架,让你的项目加速起飞
    35
  • 5
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    29
  • 6
    Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
    34
  • 7
    Magma:微软放大招!新型多模态AI能看懂视频+浏览网页+UI交互+控制机器人,数字世界到物理现实无缝衔接
    94
  • 8
    unity判断鼠标在不在UI上
    58
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    83
  • 10
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    163