拆·应用丨基于开源鸿蒙的视频播放开发样例

拆·引用

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

样例简介

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

使用说明

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

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

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

开发环境准备

下载DevEco Studio

1. 前往下载中心，登录华为账号后下载DevEco Studio，并根据下载中心页面工具完整性指导进行完整性校验。
2. 安装DevEco Studio 5.1.0release版本和OpenHarmony SDK API18。

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

3. 下载烧录镜像和烧录工具。

4. 烧录开发板

样例移植

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

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

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

• 选择5.1.0，再点击Migrate。

• 弹出提示框，点击Migrate。

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

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

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

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

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

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

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

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

• 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;
    }
}

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

报错代码示例：

functionprintObj(obj: any) {
    console.log(obj);
}
printObj('abc');

应改为：

functionprintObj(obj: string) {
    console.log(obj);
}

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

• 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';
let params = router.getParams()asRecord<string, string | number>;
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代码的适配方法。 欢迎更多的开发者加入到开源鸿蒙应用开发中来，共襄开源建设！