鸿蒙 Ark ui 视频播放组件 我不允许你不会

团队介绍

作者:徐庆

团队:坚果派 公众号:"大前端之旅" 润开鸿生态技术专家,华为HDE,CSDN博客专家,CSDN超级个体,CSDN特邀嘉宾,InfoQ签约作者,OpenHarmony布道师,电子发烧友专家博客,51CTO博客专家,擅长HarmonyOS/OpenHarmony应用开发、熟悉服务卡片开发。欢迎合作。

前言:

各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章

概述

在手机、平板或是智慧屏这些终端设备上,媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集,还是视频的播放、切换、循环,亦或是相机的预览、拍照等功能,媒体组件都是必不可少的。以视频功能为例,在应用开发过程中,我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件,我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频,也包括查看我们存储在本地的视频内容

效果图

具体实现:

1 添加网络权限

在module.json5 里面添加网络访问权限

json 复制代码
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

如果你是播放本地视频那么可以不添加这个 为了严谨我这边就提一下

我们要播放视频需要用到 video 组件

video 组件里面参数说明

| 参数名 | 参数类型 | 必填 |
|:------------------------------------------------|:----------------|:-----------|-----------------|---|
| src | string | Resource | 否 |
| currentProgressRate | number | string | PlaybackSpeed8+ | 否 |
| previewUri | string | PixelMap8+ | Resource | 否 |
| controller | VideoController | 否 |
| 其他属性说明 : | |
| .muted(false) //是否静音。默认值:false | |
| .controls(true)//不显示控制栏 | |
| .autoPlay(false) // 手动点击播放 | |
| .loop(false) // 关闭循环播放 | |
| .objectFit(ImageFit.Cover) //设置视频显示模式。默认值:Cover | |

具体代码

less 复制代码
@Entry
@Component
struct Index {


  @Styles
  customMargin() {
    .margin({ left: 20, right: 20 })
  }

  @State message: string = 'Hello World'
  private controller: VideoController = new VideoController();
  build() {
    Row() {
      Column() {
        Video({
          src: $rawfile('video1.mp4'),
          previewUri: $r('app.media.image3'),
          controller: this.controller
        })
          .muted(false) //是否静音。默认值:false
          .controls(true)//不显示控制栏
          .autoPlay(false) // 手动点击播放
          .loop(false) // 关闭循环播放
          .objectFit(ImageFit.Cover) //设置视频显示模式。默认值:Cover
          .customMargin()// 样式
          .height(200) // 高度
      }
      .width('100%')
    }
    .height('100%')
  }
}

最后总结

鸿蒙的视频播放和安卓还有iOS .里面差不多都有现成的组件使用, 但是底层还是有ffmpeg 的支持。 我们作为上层开发者只需要熟练掌握api使用即可做出来 一个实用的播放器 app, 还有很多细节 由于篇幅有限我就展开讲了 我们下一期再见 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢

相关推荐
Keya1 小时前
在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放
app·harmonyos·arkts
HMS Core5 小时前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
人工智能·游戏·harmonyos
儿歌八万首5 小时前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
dilvx5 小时前
配置鸿蒙 fastboot
华为·harmonyos
儿歌八万首5 小时前
HarmonyOS 中状态管理 V2和 V1 的区别
harmonyos·component·arkui
鸿蒙小林5 小时前
HarmonyOS应用开发者高级试题2025年7月部分单选题
harmonyos·开发者认证
zkmall5 小时前
鸿蒙商城开发:ZKmall开源商城系统特性适配与性能优化
性能优化·开源·harmonyos
_小猪睡枕头_5 小时前
鸿蒙与Flutter的混合开发
flutter·harmonyos
HarmonyOS小助手6 小时前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
逻极7 小时前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件