鸿蒙跨平台框架ArkUI-X 小试牛刀视频播放

徐建国

发布于 2024-03-13 10:38:46

1270

发布于 2024-03-13 10:38:46

文章被收录于专栏：个人路线个人路线

作者：徐庆团队：坚果派团队介绍：坚果派由坚果创建，团队拥有12个华为HDE，以及若干其他领域的三十余位万粉博主运营。

运行环境

DevEco Studio：4.0Release

OpenHarmony SDK API10

开发板：润和DAYU200

前言：

之前有写过arkui-x 跨平台框架可以同时运行在安卓 iOS 鸿蒙3个平台今天小试牛刀看看在安卓iOS上面播放视频是什么效果

效果图

ArkUI-X 环境搭建

环境搭建

具体实现

准备资源

image-20240312185713047

具体index代码

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