以下是一个基于 ​​ArkTS​​ 和 ​​HarmonyOS SDK 媒体模块​​ 的完整开发实例,演示如何实现本地/网络媒体播放、进度控制及音视频同步功能:


实例名称:多媒体播放器

功能描述:支持本地文件与在线流媒体的播放控制

1. 项目结构

├── entry/src/main/
│   ├── ts/
│   │   ├── pages/
│   │   │   └── Index.ets         # 主界面
│   │   ├── services/
│   │   │   └── MediaPlayer.ets   # 媒体服务
│   │   └── utils/
│   │       └── Formatter.ets     # 时间格式化工具
│   └── json/
│       └── app.json              # 配置文件

2. 核心代码实现

​Index.ets​​ (主界面)
@Entry
@Component
struct Index {
  private mediaPlayer: MediaPlayer = new MediaPlayer()
  private playStatus: Text = new Text()
  private progressSlider: Slider = new Slider()

  build() {
    Column({ space: 30 }) {
      // 视频播放区域
      VideoView({
        id: 'videoView',
        objectTag: 'mainPlayer',
        width: '100%',
        height: 400
      })

      // 播放控制区
      Stack({ alignContent: Alignment.End }) {
        Button('播放/暂停')
          .onClick(() => this.mediaPlayer.togglePlay())

        Button('进度跳转')
          .onClick(() => this.progressSlider.value = this.mediaPlayer.currentTime)

        Text(this.playStatus.text)
          .fontSize(18)
      }
      .width('100%')
      .padding({ right: 20 })

      // 进度条
      this.progressSlider
        .min(0)
        .max(100)
        .value(this.mediaPlayer.progress * 100)
        .onChange((value) => {
          this.mediaPlayer.seek(value / 100)
        })
    }
    .width('100%')
    .height('100%')
    .onInit(() => this.initPlayer())
  }

  private async initPlayer() {
    try {
      // 配置媒体源(支持本地路径/网络URL)
      const mediaSource = MediaSource.create({
        url: 'https://example.com/sample.mp4', // 替换为实际媒体地址
        type: MediaType.VIDEO
      })

      await this.mediaPlayer.prepare(mediaSource)
      this.playStatus.text = `准备就绪:${mediaSource.url}`
      
      // 绑定播放状态监听
      this.mediaPlayer.on('stateChange', (state) => {
        this.playStatus.text = `播放状态:${this.getStateText(state)}`
      })
    } catch (err) {
      this.playStatus.text = `错误:${err.message}`
    }
  }

  private getStateText(state: MediaPlayerState): string {
    return {
      [MediaPlayerState.Idle]: '空闲',
      [MediaPlayerState.Preparing]: '准备中',
      [MediaPlayerState.Playing]: '播放中',
      [MediaPlayerState.Paused]: '已暂停',
      [MediaPlayerState.Stopped]: '已停止'
    }[state]
  }
}

​MediaPlayer.ets​​ (媒体服务)
@Entry
@Service
class MediaPlayer extends ServiceAbility {
  private player: Player = new Player()
  private currentUrl: string = ''

  onStartCommand(intent: Intent): number {
    return ServiceAbility.START_STICKY
  }

  // 核心播放控制方法
  togglePlay() {
    if (this.player.state === MediaPlayerState.Playing) {
      this.player.pause()
    } else {
      this.player.play()
    }
  }

  seek(position: number) {
    this.player.seekTo(position)
  }

  prepare(source: MediaSource) {
    return this.player.prepare(source)
  }

  // 多格式解码支持
  setAudioAttributes(attributes: AudioAttributes) {
    this.player.setAudioAttributes(attributes)
  }

  // 获取实时进度(单位:秒)
  get progress(): number {
    return this.player.currentTime
  }
}

​Formatter.ets​​ (时间工具)
class Formatter {
  static formatTime(seconds: number): string {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
}

3. 配置文件 app.json

{
  "app": {
    "bundleName": "com.example.mediaplayer",
    "version": { "code": 1, "name": "1.0.0" }
  },
  "deviceConfig": {
    "formFactor": "phone",
    "screenSize": { "width": 1080, "height": 1920 }
  },
  "module": {
    "reqPermissions": [
      {
        "name": "ohos.permission.READ_USER_STORAGE",
        "reason": "$string:read_storage_reason"
      },
      {
        "name": "ohos.permission.INTERNET",
        "reason": "$string:internet_reason"
      }
    ]
  }
}

4. 关键媒体 API 解析

模块 核心功能
​Player​ prepare() - 准备媒体资源
play()/pause() - 播放控制
seekTo() - 跳转播放位置
​MediaSource​ 支持本地文件(file://)和网络流媒体(http(s)://)
​AudioAttributes​ 设置音频模式(立体声/环绕声)和音量控制

5. 扩展功能实现建议

  1. ​直播流支持​​:

    // 使用RTSP协议
    const liveStream = MediaSource.create({
      url: 'rtsp://example.com/live.sdp',
      type: MediaType.LIVE_STREAM
    })
  2. ​字幕支持​​:

    this.player.addSubtitleTrack({
      language: 'zh-CN',
      label: '中文',
      path: 'subtitles.srt'
    })
  3. ​硬件加速​​:

    this.player.setVideoSurface(SurfaceType.TEXTURE_VIEW)

6. 注意事项

  1. ​权限处理​​:网络媒体需要动态申请ohos.permission.INTERNET
  2. ​内存管理​​:长时间播放需监听onWindowStageDestroy释放资源
  3. ​格式兼容​​:使用setAudioAttributes配置解码器优先级
  4. ​后台播放​​:需在config.json中声明backgroundMode

该实例完整实现了媒体播放器的核心功能,支持网络流媒体、实时进度控制、多格式解码等特性。开发者可扩展以下功能:

  • 添加播放列表管理
  • 实现倍速播放(setPlaybackSpeed()
  • 集成DRM版权保护
  • 支持画中画模式(PiP)
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐