OpenHarmony开发者论坛

标题: 拆·应用丨基于开源鸿蒙的视频播放开发样例 [打印本页]

---

作者: FloridaWanderer    时间: 2026-1-7 14:46
标题: 拆·应用丨基于开源鸿蒙的视频播放开发样例
[md]# 拆·引用

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

# 样例简介

在开源鸿蒙生态建设中，**多媒体能力**是构建丰富用户体验的核心要素。本开发样例针对视频播放场景，聚焦开源鸿蒙原生媒体框架，通过`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/do ... y-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/ ... ure/Media/VideoShow "样例源码链接")



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

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`错误。


报错代码示例：

```javascript
class Person {
    constructor(readonly name: string) {}
    getName(): string {
        return this.name;
    }
}
```

应改为：

```javascript
class Person {
    name: string
    constructor(name: string) {
    this.name = name;
    }
    getName(): string {
    return this.name;
    }
}
```

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


报错代码示例：

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

应改为：

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

- `arkts-no-va`r错误，需要将`var`改为`let`。


- `arkts-no-props-by-index`错误。


报错代码示例：

```javascript
import { router } from'@kit.ArkUI';
letparams: Object = router.getParams();
letfunNum: number = params['funNum'];
lettarget: string = params['target'];
```

应修改为：

```javascript
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`组件。

```javascript
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`代码的适配方法。
欢迎更多的开发者加入到开源鸿蒙应用开发中来，共襄开源建设！

[/md]

---

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)

Powered by Discuz! X3.5