鸿蒙 ArkTS 视频播放开发学习笔记

本文目标
实现一个支持播放控制、全屏切换的自适应视频播放器，并解析核心开发逻辑。

---

一、环境准备

1. DevEco Studio 4.0+

2. SDK：API 9+（HarmonyOS 4.0）

3. 依赖模块

   json

   "dependencies": {
     "@ohos.multimedia.media": "^1.0.0"  // 媒体服务模块
   }

---

二、核心代码实现

1. 布局文件（Index.ets）

typescript

import media from '@ohos.multimedia.media';

@Entry
@Component
struct VideoPlayer {
  // 1. 定义控制器
  controller: VideoController = new VideoController();
  // 2. 视频路径（支持网络/本地）
  private src: Resource = $rawfile('demo.mp4'); 

  build() {
    Column() {
      // 3. 视频组件
      Video({
        src: this.src,
        controller: this.controller
      })
        .width('100%')
        .aspectRatio(1.78) // 16:9比例
        .autoPlay(false)

      // 4. 自定义控制条
      this.BuildControlBar()
    }
  }

  // 5. 控制条组件
  @Builder
  BuildControlBar() {
    Row() {
      Button(this.controller.currentState === playState.Playing ? '暂停' : '播放')
        .onClick(() => {
          if (this.controller.currentState === playState.Playing) {
            this.controller.pause();
          } else {
            this.controller.start();
          }
        })
      
      Slider({ value: this.controller.currentTime, max: this.controller.duration })
        .onChange(v => this.controller.seek(v))
    }
  }
}

---

三、关键功能解析

1. 视频控制器（VideoController）

方法	作用
start()	开始播放
pause()	暂停
seek(time: number)	跳转到指定时间（ms）

2. 状态监听

typescript

// 监听播放状态变化
this.controller.onStateChange((newState) => {
  if (newState === playState.Completed) {
    promptAction.showToast({ message: '播放完成！' });
  }
});

3. 全屏切换

typescript

// 通过修改宽高实现全屏
@State isFullScreen: boolean = false;

Video()
  .width(this.isFullScreen ? '100%' : '90%')
  .height(this.isFullScreen ? '100%' : '200vp')

四、效果图示意 

---

五、避坑指南

1. 权限问题
   需在 module.json5 中添加网络权限：

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

2. 格式兼容性
   鸿蒙原生支持 MP4/H.264，H.265需设备硬件支持。

3. 生命周期管理
   页面退出时释放资源：

   onPageHide() {
     this.controller.release();
   }

---

六、总结

鸿蒙视频播放开发核心流程：

1. Video组件 + Controller 控制播放基础

2. 自定义控制条增强交互

3. 全屏/进度通过状态驱动UI更新

4. 权限/生命周期确保稳定性

优势：跨设备自适应（手机/平板/车机自动适配布局）
扩展方向：弹幕功能、倍速播放、画中画模式