草庐IT

OpenHarmony仿应用视频播放器-爱电影(一)

徐金生 2023-03-28 原文

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

说在前面的话

OpenHarmony标准系统已更新到了3.2 beta5的版本,近期社区应该也会推出3.2 release版本,甚是期待。富设备上不仅可以拍照、录制视频,娱乐功能必不可少,追剧看电影、打游戏,当前环境下还没有相关的应用可以支持,接下去我就和大家一起从北向角度来实现一个视频播放器,我们暂且叫它—爱电影(别笑话,名字比较俗,但通俗易懂)。

在不同的平台上都存在不同类型的视频播放器,主要的功能就是播放视频资源,根据平台不同其附加的功能也不同,比如在移动设备上,市场上的视频播放器除播放视频外,还给用户提供了选择视频资源高强度、截屏、AI识别、背景音乐搜索、人物搜索等等高质量的体验。本次的目的除了实现视频播放的核心功能外,最主要还是以学习如何在OpenHarmony平台上开发应用为主,所以附加功能待后期增加,下面我将给大家介绍下,爱电影视频播放器的规划。

效果展示

​在线视频​

项目开发

项目规划

项目开始先来看下整体规划图,如下:

从上面的设计初稿可以看出,我们的爱电影视频播放器有4个页面:闪屏页、电影列表页、播放电影页(包含电影简介)、全屏播放页,接下去我们会对每个页面的具体开发内容和涉及到是知识点进行详细的说明,因为内容较多,会进行多篇的进行讲解,我们开始吧~。

这边插一句,视频播放器的整体规划图中有同学可能会问是使用什么设计工具做的草图,对于个人开发者而言,其实选择性很多,而且基础功能都是免费的,我个人使用的是Pixso设计工具,不说它有什么与众不同,只是个人习惯,用得顺手而已,我比较喜欢Pixso中提供的插件,比如图标插件,支持iconfont直接导入资源,方便导出,开发中需要使用到的图标基本都能找到。

下面简单的介绍下,各页面直接的关系。

  • 闪屏页:应用的入口页面,可以用于初始化一些耗时的操作,默认等待时间3s,3s后自动跳转到首页;
  • 首页:由banner+电影列表组成,banner横向自动轮询播放,电影列表展示热门电影,点击相关的资源跳转到视频播放页。
  • 视频播放页:支持在线视频和本地视频加载与播放功能,同时支持视频的暂停、继续播放、拖拽进度、全屏播放、查看视频简介等功能,点击全屏播放跳转至全屏播放页,当然可以通过页面上的返回键回到上级页面—首页。
  • 全屏播放页:横屏播放视频,支持视频基础操作,播放、暂停、拖拽进度、切换播放倍数、退出全屏播放等功能,点击页面上的返回键或退出全屏播放键即可返回到上级界面—视频播放页,当然返回后横屏切换成竖屏显示。

大概了解了页面的基础功能和页面之间的相互关系,接下来我们就从闪屏页开始详细的介绍下开发此功能所涉及的知识点。

首先我们看下闪屏页面设计图,如下:

如上图所示,闪屏页面的开发内容主要包含以下几点:
1、主页上加载一张电影海报,包括爱电影logo。
2、右上角显示3s倒计时,倒计时结束自动跳转到主页。
3、闪屏页面跳转到主页时,需要实现一个翻页效果,要求:闪屏页视图跳转时整体视图呈现淡出且渐渐放大的效果。

开发环境

硬件平台:DAYU2000 RK3568
系统版本:OpenHarmony 3.2 beta5
SDK:9(3.2.10.6)
IDE:DevEco Studio 3.1 Beta1 Build Version: 3.1.0.200, built on February 13, 2023

开发

创建工程

说明:通过DevEco Studio创建项目,项目相关配置如下图:

程序代码

Splash.ets

/**
* 闪屏页面
*/
import router from '@ohos.router';
const TAG: string = 'Splash'
@Entry
@Component
struct Splash {
private timeID: number
@State curTime: number = 3
@State opacity1: number = 1
@State scale1: number = 1
aboutToAppear() {
console.info(`${TAG} aboutToAppear`)
this.timeID = setInterval(() => {
this.curTime -= 1
if (this.curTime === 0) {
this.stopTime()
this.goMainPage()
}
}, 1000)
}
stopTime() {
clearInterval(this.timeID)
}
goMainPage() {
console.info(`${TAG} goMainPage`)
router.pushUrl({
url: 'pages/Index'
})
}
aboutToDisappear() {
this.stopTime()
}
build() {
Stack({
alignContent: Alignment.TopEnd
}) {
Image($r('app.media.splash'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Fill)
Text(this.curTime + 's')
.fontColor(Color.White)
.fontSize(12)
.backgroundColor('#993b394a')
.padding(10)
.margin({
top: 40,
right: 40
})
.border({
radius: 20
})
}
.width('100%')
.height('100%')
.opacity(this.opacity1)
.scale({
x: this.scale1,
y: this.scale1
})
}
pageTransition() {
PageTransitionExit({ duration: 1200, curve: Curve.Linear,
type: RouteType.Push })
.onExit((type: RouteType, progress: number) => {
console.info(`${TAG} PageTransitionExit onExit type:${type} progress:${progress}`)
this.opacity1 = 1 - progress
this.scale1 = 1 + progress
})
}
}

开发说明

1、整个页面根组件为Stack,通过堆叠的方式增加Image和Text组件实现界面视图,Image用于加载爱电影宣传图,Text用于显示倒计时的数字。
2、通过setInterval()每间隔1秒执行一次计算,并更改倒计时数值,显示在右上角。
3、3s倒计时结束后,执行goMainPage()跳转到主页。
4、通过pageTransition的PageTransitionExit()实现页面之间的转场动画,页面路由router执行pushUrl时页面会立即跳转到目标页面,而闪屏页是初始页面,为了实现界面淡出和放大的效果,我们除了在闪屏页Splash.ets中实现页面退出动效,还需要在目标页面,也就是首页Index.ets中实现pageTransition的PageTransitionEnter(),此页面实现淡入,执行时长大于Splash.ets的PageTransitionExit(),即可以看出转场效果。

Index.ets

pageTransition() {
PageTransitionEnter({ duration: 1500,
type: RouteType.Push,
curve: Curve.Linear })
.opacity(this.opacity1)
.onEnter((type: RouteType, progress: number) => {
console.info(`${TAG} PageTransitionEnter onEnter type:${type} progress:${progress}`)
this.opacity1 = progress
})
}

闪屏页比较简单,就介绍到这,下一篇介绍下视频播放器的主页,将闪屏页与主页关联。

想了解更多关于开源的内容,请访问:

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

有关OpenHarmony仿应用视频播放器-爱电影(一)的更多相关文章

  1. ruby - 将差异补丁应用于字符串/文件 - 2

    对于具有离线功能的智能手机应用程序,我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl

  2. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  3. ruby - 无法运行 Rails 2.x 应用程序 - 2

    我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby​​:$rvmuseree-1.8.7-head我尝试运行服务器,然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

  4. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗? - 2

    刚入门rails,开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗?有哪些用例。您如何为Rails应用程序使用应用程序Controller?我不想在那里放太多代码,因为据我了解,每个请求都会调用此Controller。这是真的? 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度,尽管在某些情况下ApplicationContr

  5. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容? - 2

    我是一个Rails初学者,但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现),但没有得到任何结果。有什么建议吗?我知道Rails调试器,但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

  6. ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2

    是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录?这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢,抱歉我的英语不好 最佳答案 我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以,在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码,您的模块将在

  7. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  8. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读:随着叮咚买菜业务的发展,不同的业务场景对数据分析提出了不同的需求,他们希望引入一款实时OLAP数据库,构建一个灵活的多维实时查询和分析的平台,统一数据的接入和查询方案,解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型,最终引入ApacheDoris作为最终的OLAP分析引擎,Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图,在叮咚买菜数十个业务场景中广泛应用。作者|叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月,是一家专注美好食物的创业公司。叮咚买菜专注吃的事业,为满足更多人“想吃什么”而努力,通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

随机推荐