HarmonyOS播放视频及音乐

最新推荐文章于 2025-08-09 22:03:22 发布

原创最新推荐文章于 2025-08-09 22:03:22 发布 · 653 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #音视频 #华为

鸿蒙开发专栏收录该内容

13 篇文章

订阅专栏

文章详细描述了一个使用Flutter编写的自定义视频组件，展示了如何设置视频源、预览图片、控制播放/暂停、速度调整以及处理视频播放相关事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下

在这里插入图片描述

代码


@Entry
@Component
struct PageVideo {
  @State videoSrc: Resource = $rawfile('AndroidVideo.mp4')
  @State previewUri: Resource = $rawfile('6_20231218171028A068.jpg')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
  @State isAutoPlay: boolean = false
  @State showControls: boolean = true
  controller: VideoController = new VideoController()


  build() {
    Column() {
      Video({
        src: this.videoSrc,
        previewUri: this.previewUri,
        currentProgressRate: this.curRate,
        controller: this.controller
      }).width('100%').height(600)
        .autoPlay(this.isAutoPlay)
        .controls(this.showControls)
        .onStart(() => {
          console.info('onStart')
        })
        .onPause(() => {
          console.info('onPause')
        })
        .onFinish(() => {
          console.info('onFinish')
        })
        .onError(() => {
          console.info('onError')
        })
        .onPrepared((e) => {
          console.info('onPrepared is ' + e.duration)
        })
        .onSeeking((e) => {
          console.info('onSeeking is ' + e.time)
        })
        .onSeeked((e) => {
          console.info('onSeeked is ' + e.time)
        })
        .onUpdate((e) => {
          console.info('onUpdate is ' + e.time)
        })

      Row() {
        Button('切换来源').onClick(() => {

          if(this.videoSrc != $rawfile('3773192759.mp3')) {
            this.previewUri = $rawfile('cover1.png')
            this.videoSrc = $rawfile('3773192759.mp3')
          } else{
            this.previewUri = $rawfile('6_20231218171028A068.jpg')
            this.videoSrc = $rawfile('AndroidVideo.mp4')
          }// 切换视频源

        }).margin(5)

        Button('显示导航').onClick(() => {
          this.showControls = !this.showControls // 切换是否显示视频控制栏
        }).margin(5)
      }

      Row() {
        Button('开始').onClick(() => {
          this.controller.start() // 开始播放
        }).margin(5)
        Button('暂停').onClick(() => {
          this.controller.pause() // 暂停播放
        }).margin(5)
        Button('停止').onClick(() => {
          this.controller.stop() // 结束播放
        }).margin(5)
        Button('回到10秒播放').onClick(() => {
          this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
        }).margin(5)
      }

      Row() {
        Button('播放速度 0.75').onClick(() => {
          this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
        }).margin(5)
        Button('播放速度 1').onClick(() => {
          this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
        }).margin(5)
        Button('播放速度 2').onClick(() => {
          this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
        }).margin(5)
      }
    }
  }
}