【鸿蒙开发】我不允许你还不会，鸿蒙Ark ui视频播放组件

最新推荐文章于 2024-09-06 22:22:21 发布

「已注销」

最新推荐文章于 2024-09-06 22:22:21 发布

阅读量470

点赞数 4

CC 4.0 BY-SA版权

文章标签： harmonyos ui 音视频鸿蒙鸿蒙系统

本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/139656542

前言：

不久前华为已经宣布全新HarmonyOS NEXT 鸿蒙星河版将在今年秋天正式和消费者见面，并已经面向开发者开放申请。鸿蒙星河版会有更智能、更极致的原生体验，也标志着鸿蒙迈向其发展的第二阶段。

因此，对于鸿蒙生态建设而言，2024年可谓至关重要，而生态建设的前提，就是要有足够的开发人才。与之对应的，今年春招市场上与鸿蒙相关岗位和人才旺盛的热度，一方面反应了鸿蒙生态的逐渐壮大，另一方面也让人们对鸿蒙下一阶段的发展更具信心。

所以我就想提前给大家写一些博客文章

概述

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

效果图

在这里插入图片描述

具体实现：

1 添加网络权限

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

"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

在这里插入图片描述

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

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

video 组件里面参数说明

在这里插入图片描述

具体代码

@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%')
  }
}