HarmonyOS NEXT 中级开发笔记:ArkTS实现短剧播放器基础功能

100 阅读1分钟

今天尝试用ArkTS应用开发语言为HarmonyOS NEXT搭建一个简易的短剧播放器原型。作为刚接触鸿蒙生态不久的开发者,记录下这个过程中的一些实践心得。

首先在DevEco Studio中创建了一个API12兼容的项目。ArkTS的静态类型检查确实能帮助规避不少运行时错误,这点比纯TS开发体验要好。基础页面结构采用声明式UI编写:

typescript

 

`@Component

struct ShortVideoPlayer {

  @State currentProgress: number = 0

  @State isPlaying: boolean = false

  private controller: VideoController = new VideoController()

 

  build() {

    Column() {

      Video({

        src: 'resource://base/media/short_drama.mp4',

        controller: this.controller

      })

      .width('100%')

      .aspectRatio(16/9)

 

      ProgressBar({

        value: this.currentProgress,

        total: 100

      }).margin(10)

 

      Row() {

        Button(this.isPlaying ? '暂停' : '播放')

          .onClick(() => {

            this.togglePlay()

          })

      }.justifyContent(FlexAlign.Center)

    }

  }

 

  private togglePlay() {

    if (this.isPlaying) {

      this.controller.pause()

    } else {

      this.controller.start()

    }

    this.isPlaying = !this.isPlaying

  }

}`

这个简单实现包含了三个核心功能:

1. 视频组件的基础渲染

2. 播放/暂停状态切换

3. 进度条占位(实际项目需要绑定真实进度)

在HarmonyOS NEXT上测试时发现,VideoController的API与Android MediaPlayer有些差异,需要重新适应。比如准备状态监听改为了Promise形式:

typescript

 

`async function prepareVideo() {

  try {

    await controller.prepare()

    console.log('视频准备就绪')

  } catch (err) {

    console.error('视频加载失败:' + err)

  }

}`

遇到的一个小坑是:ArkTS要求明确声明组件状态变量的类型,不能依赖类型推断。比如@State isPlaying: boolean必须显式声明,不能只写@State isPlaying = false。

下一步计划加入:

1. 全屏切换功能

2. 手势控制进度

3. 多集切换列表

总体感觉HarmonyOS NEXT的视频能力已经比较完善,ArkTS的声明式UI写法也确实比命令式更简洁。不过在复杂动画处理上还需要继续摸索。如果有更资深的鸿蒙开发者看到这篇笔记,欢迎指正不足之处。