基于开源鸿蒙的视频播放开发样例

拆·应用

【拆·应用】是为开源鸿蒙应用开发者打造的技术分享平台，汇聚开发者的技术洞见与实践经验，提供开发心得与创新成果的展示窗口。诚邀您踊跃发声，期待您的真知灼见与技术火花！

样例简介

在开源鸿蒙生态建设中，多媒体能力是构建丰富用户体验的核心要素。本开发样例针对视频播放场景，聚焦开源鸿蒙原生媒体框架，通过Video组件实现视频资源加载、播放状态控制及多样化展示形态。重点演示组件化播放器封装、全屏/窗口化动态切换、上下滑动轮播等关键技术方案，为开发者提供标准化视频功能实现路径，助力构建高性能、可定制的多媒体应用。

使用说明

启动播放：首页点击播放按钮，视频开始播放；再次点击画面进入全屏模式

窗口化切换：在首页向下滑500vp后，视频自动切换为悬浮小窗模式

轮播体验：点击底部导航栏"直播"入口，上下滑动浏览推荐视频流

开发环境准备

下载与安装DevEco Studio

1.前往下载中心，登录华为账号后下载DevEco Studio，并根据下载中心页面工具完整性指导进行完整性校验。

2.安装DevEco Studio 5.1.0release版本和OpenHarmony SDK API18。

说明：SDK已嵌入DevEco Studio中，无需额外下载配置，新的IDE安装完成后，新建一个helloworld工程检测环境是否OK。

3.下载烧录镜像和烧录工具。请参考链接：

https://gitee.com/openharmony/docs/blob/master/zh-cn/release-notes/OpenHarmony-v5.1.0-release.md

4.烧录开发板，请参考链接：

https://gitee.com/hihope_iot/docs/blob/master/HiHope_DAYU200/docs/%E7%83%A7%E5%BD%95%E6%8C%87%E5%AF%BC%E6%96%87%E6%A1%A3.md

样例移植

源样例是使用DevEco Studio 3.1Beta2，基于API9开发，需要移植到DevEco Studio 5.1.0 release，OpenHarmony SDK API18上。在安装好DevEco Studio后，打开需要迁移的应用工程视频播放样例源码，样例源码链接：

https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/VideoShow

在工程同步过程中会有报错，需要修改应用工程相关配置文件。

1.打开工程后出现Sync failed，点击Migrate Assistant，如图：

a) 选择5.1.0，再点击Migrate。

b) 弹出提示框，点击Migrate。

c) 再次提示Sync failed，修改build-profile.json文件。

2.修改工程目录下build-profile.json文件。

a) 修改完之后点击Try Again 进行同步

b) 同步完成截图如下所示，此时就可以进行工程编译。

3.点击编译按钮进行编译，出现如下报错，根据报错提示修改module.json。

a) 打开文件将鼠标放置在报错处，会出现修改提示，如图提示删除uiSyntax字段。

b) 将srcEntrance改为srcEntry，icon字段中内容修改为layered_image.json,并在资源文件夹下添加layered_image.json、backgroud.png、foreground.png文件，这些文件可以在新建工程中获取，修改完成后点击Sync Now。

4.代码报错修改，如下是几个典型的报错解决方案。

a) arkts-no-ctor-prop-decls错误。

报错代码示例：

class Person {

constructor(readonly name: string) {}

getName(): string {

return this.name;

}

}

应修改为：

class Person {

name: string

constructor(name: string) {

this.name = name;

}

getName(): string {

return this.name;

}

}

b) arkts-no-any-unknown错误，需要按照业务逻辑，将代码中的any, unknown改为具体的类型。

报错代码示例：

functionprintObj(obj: any) {

console.log(obj);

}

printObj('abc');

应修改为：

functionprintObj(obj: string) {

console.log(obj);

}

printObj('abc');

c) arkts-no-var错误，需要将var改为let。

d) arkts-no-props-by-index错误。

报错代码示例：

import{ router }from'@kit.ArkUI';

letparams:Object= router.getParams();

letfunNum:number= params['funNum'];

lettarget:string= params['target'];

应修改为：

import{ router }from'@kit.ArkUI';

letparams = router.getParams()asRecord;

letfunNum:number= params.funNumasnumber;

lettarget:string= params.targetasstring;

Video组件介绍

媒体视频播放是该组件从API version 7开始支持，提供简单的视频播放、播控功能，复杂开发场景推荐使用AVPlayer播控API和XComponent组件开发，本样例中Video组件播放视频的代码如下： 详细介绍请查看开源鸿蒙官网Video组件。

Video({

src: this.videoSrc,

controller: this.detailVideoController

})
.width('100%')
.backgroundColor(this.isHidden ? '#ffffff' : '#000000')
.aspectRatio(1.12)
.controls(this.controls)
.objectFit(ImageFit.Contain)
.onUpdate((e) => {
this.updateTime = e.time
})
.onPrepared((e) => {

console.info('onPrepared:' + e.duration)
})
.onFinish(() => {
this.isHidden = true;
this.isStart = false;
this.updateTime = 0;
})

结语

以上是本次样例开发移植的分享，主要包括开发环境搭建、开发移植的步骤和编译问题解决，可以让初学者掌握开发开源鸿蒙应用的环境搭建和基本组件等知识，也让有基础的开发者了解到ArkTS语法规则下将TS代码适配成ArkTS代码的适配方法。最后，欢迎更多的开发者加入到开源鸿蒙应用开发中来。