首页 > 其他分享 >#创作者激励# #跟着小白一起学鸿蒙# 制作一个视频播放器

#创作者激励# #跟着小白一起学鸿蒙# 制作一个视频播放器

时间:2023-04-06 11:41:18浏览次数:79  
标签:播放器 创作者 鸿蒙 void param callback AVPlayer playback type

【本文正在参加2023年第一期优质创作者激励计划】

简介

媒体子系统是OpenHarmony中重要的子系统,可以提供音视频播放能力。媒体子系统为开发者提供一套简单且易于理解的接口,使得开发者能够方便接入系统并使用系统的媒体资源。媒体子系统提供以下常用功能:

  • 音视频播放(AVPlayer9+),AudioPlayer6+和VideoPlayer8+整合,升级了状态机和错误码,推荐使用
  • 音视频录制(AVRecorder9+),AudioRecorder6+和VideoRecorder9+整合,推荐使用
  • 音频播放(AudioPlayer6+),AVPlayer9+发布后停止维护,请使用AVPlayer9+
  • 视频播放(VideoPlayer8+),AVPlayer9+发布后停止维护,请使用AVPlayer9+
  • 音频录制(AudioRecorder6+),AVRecorder9+发布后停止维护,请使用AVRecorder9+
  • 视频录制(VideoRecorder9+),AVRecorder9+发布后停止维护,请使用AVRecorder9+

从3.2开始OpenHarmony推出了AVPlayer和AVRecorder接口,之前的VideoPlayer、AudioPlayer这些接口会停止维护,所以我们今天学习下怎么使用AVPlayer接口


导入模块

import media from '@ohos.multimedia.media';
  • 创建avplayer
this.avPlayer = await media.createAVPlayer()

如上,我们使用的是promise接口,对应的接口定义为:

  /**
   * Creates an AVPlayer instance.
   * @since 9
   * @syscap SystemCapability.Multimedia.Media.AVPlayer
   * @param callback Callback used to return AVPlayer instance if the operation is successful; returns null otherwise.
   * @throws { BusinessError } 5400101 - No memory. Return by callback.
   */
   function createAVPlayer(callback: AsyncCallback<AVPlayer>): void;

  /**
   * Creates an AVPlayer instance.
   * @since 9
   * @syscap SystemCapability.Multimedia.Media.AVPlayer
   * @returns A Promise instance used to return AVPlayer instance if the operation is successful; returns null otherwise.
   * @throws { BusinessError } 5400101 - No memory. Return by promise.
   */
   function createAVPlayer() : Promise<AVPlayer>;
  • 注册avplayer回调

    //注册状态变化回调,不同状态时做不同动作
    avPlayer.on('stateChange', async (state, reason) => {
    	……
    })
    //注册时间变化回调,方便更新进度条时间
    avPlayer.on('timeUpdate', (time:number) => {
    	……
    })
    
  • avplayer播放流程

graph LR
赋值avPlayer.url开始播放 --> 回调进入initialized --> 赋值avPlayer.surfaceId --> avPlayer.prepare --> 回调进入prepared --> avPlayer.play
//视频播放伪代码
async avPlayerDemo() {
    this.avPlayer.on('stateChange', async (state, reason) => {
        switch (state) {
            case 'idle': // 成功调用reset接口后触发该状态机上报
                console.info(TAG + 'state idle called')
                this.avPlayer.release() // 释放avplayer对象
                break;
            case 'initialized': // avplayer 设置播放源后触发该状态上报
                console.info(TAG + 'state initialized called ')
                this.avPlayer.surfaceId = this.surfaceID // 设置显示画面,当播放的资源为纯音频时无需设置
                this.avPlayer.prepare().then(() => {
                    console.info(TAG+ 'prepare success');
                }, (err) => {
                    console.error(TAG + 'prepare filed,error message is :' + err.message)
                })
                break;
            case 'prepared': // prepare调用成功后上报该状态机
                console.info(TAG + 'state prepared called')
                this.avPlayer.play() // 调用播放接口开始播放
                break;
            case 'playing': // play成功调用后触发该状态机上报
                console.info(TAG + 'state playing called')
                if (this.count == 0) {
                    this.avPlayer.pause() // 调用暂停播放接口
                } else {
                    this.avPlayer.seek(10000, media.SeekMode.SEEK_PREV_SYNC) // 前向seek置10秒处,触发seekDone回调函数
                }
                break;
            case 'paused': // pause成功调用后触发该状态机上报
                console.info(TAG + 'state paused called')
                if (this.count == 0) {
                    this.count++
                    this.avPlayer.play() // 继续调用播放接口开始播放
                }
                break;
            case 'completed': // 播放结束后触发该状态机上报
                console.info(TAG + 'state completed called')
                this.avPlayer.stop() //调用播放结束接口
                break;
            case 'stopped': // stop接口成功调用后触发该状态机上报
                console.info(TAG + 'state stopped called')
                this.avPlayer.reset() // 调用reset接口初始化avplayer状态
                break;
            case 'released':
                console.info(TAG + 'state released called')
                break;
            case 'error':
                console.info(TAG + 'state error called')
                break;
            default:
                console.info(TAG + 'unkown state :' + state)
                break;
        }
    })

    // 创建avPlayer实例对象
    this.avPlayer = await media.createAVPlayer()
    let fdPath = 'fd://'
    let pathDir = "/data/storage/el2/base/haps/entry/files" // pathDir在FA模型和Stage模型的获取方式不同,请参考开发步骤首行的说明,根据实际情况自行获取。
    // path路径的码流可通过"hdc file send D:\xxx\H264_AAC.mp4 /data/app/el2/100/base/ohos.acts.multimedia.media.avplayer/haps/entry/files" 命令,将其推送到设备上
    let path = pathDir  + '/H264_AAC.mp4'
    let file = await fs.open(path)
    fdPath = fdPath + '' + file.fd
    //赋值url后就会进入stateChange callback
    this.avPlayer.url = fdPath
}
  • 其他播放控制接口

        /**
         * Prepare audio/video playback, it will request resource for playing.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when prepare completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         * @throws { BusinessError } 5400106 - Unsupport format. Return by callback.
         */
        prepare(callback: AsyncCallback<void>): void;
    
        /**
         * Prepare audio/video playback, it will request resource for playing.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @returns A Promise instance used to return when prepare completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
         * @throws { BusinessError } 5400106 - Unsupport format. Return by promise.
         */
        prepare(): Promise<void>;
    
        /**
         * Play audio/video playback.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when play completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         */
        play(callback: AsyncCallback<void>): void;
    
        /**
         * Play audio/video playback.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @returns A Promise instance used to return when play completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
         */
        play(): Promise<void>;
    
        /**
         * Pause audio/video playback.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when pause completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         */
        pause(callback: AsyncCallback<void>): void;
    
        /**
         * Pause audio/video playback.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @returns A Promise instance used to return when pause completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
         */
        pause(): Promise<void>;
    
        /**
         * Stop audio/video playback.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when stop completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         */
        stop(callback: AsyncCallback<void>): void;
    
         /**
          * Stop audio/video playback.
          * @since 9
          * @syscap SystemCapability.Multimedia.Media.AVPlayer
          * @returns A Promise instance used to return when stop completed.
          * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
          */
        stop(): Promise<void>;
    
        /**
         * Reset AVPlayer, it will to idle state and can set src again.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when reset completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         */
        reset(callback: AsyncCallback<void>): void;
    
        /**
         * Reset AVPlayer, it will to idle state and can set src again.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @returns A Promise instance used to return when reset completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
         */
        reset(): Promise<void>;
    
        /**
         * Releases resources used for AVPlayer.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param callback A callback instance used to return when release completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by callback.
         */
        release(callback: AsyncCallback<void>): void;
    
        /**
         * Releases resources used for AVPlayer.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @returns A Promise instance used to return when release completed.
         * @throws { BusinessError } 5400102 - Operation not allowed. Return by promise.
         */
        release(): Promise<void>;
    
        /**
         * Jumps to the specified playback position.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param timeMs Playback position to jump, should be in [0, duration].
         * @param mode See @SeekMode .
         */
        seek(timeMs: number, mode?:SeekMode): void;
    
  • 其他回调接口

    /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback stateChange event.
         */
        on(type: 'stateChange', callback: (state: AVPlayerState, reason: StateChangeReason) => void): void;
        off(type: 'stateChange'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback volume event.
         */
        on(type: 'volumeChange', callback: Callback<number>): void;
        off(type: 'volumeChange'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback end of stream
         */
        on(type: 'endOfStream', callback: Callback<void>): void;
        off(type: 'endOfStream'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback seekDone event.
         */
        on(type: 'seekDone', callback: Callback<number>): void;
        off(type: 'seekDone'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback speedDone event.
         */
        on(type: 'speedDone', callback: Callback<number>): void;
        off(type: 'speedDone'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback setBitrateDone event.
         */
        on(type: 'bitrateDone', callback: Callback<number>): void;
        off(type: 'bitrateDone'): void;
        /**
         * LRegister or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback timeUpdate event.
         */
        on(type: 'timeUpdate', callback: Callback<number>): void;
        off(type: 'timeUpdate'): void;
        /**
         * Register or unregister listens for media playback events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback durationUpdate event.
         */
        on(type: 'durationUpdate', callback: Callback<number>): void;
        off(type: 'durationUpdate'): void;
        /**
         * Register or unregister listens for video playback buffering events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback buffering update event to listen for.
         * @param callback Callback used to listen for the buffering update event, return BufferingInfoType and the value.
         */
        on(type: 'bufferingUpdate', callback: (infoType: BufferingInfoType, value: number) => void): void;
        off(type: 'bufferingUpdate'): void;
        /**
         * Register or unregister listens for start render video frame events.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback event return .
         */
        on(type: 'startRenderFrame', callback: Callback<void>): void;
        off(type: 'startRenderFrame'): void;
        /**
         * Register or unregister listens for video size change event.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback event return video size.
         */
        on(type: 'videoSizeChange', callback: (width: number, height: number) => void): void;
        off(type: 'videoSizeChange'): void;
        /**
         * Register or unregister listens for audio interrupt event, refer to {@link #audio.InterruptEvent}
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback event return audio interrupt info.
         */
        on(type: 'audioInterrupt', callback: (info: audio.InterruptEvent) => void): void;
        off(type: 'audioInterrupt'): void;
        /**
         * Register or unregister listens for available bitrate list collect completed events for HLS protocol stream playback.
         * This event will be reported after the {@link #prepare} called.
         * @since 9
         * @syscap SystemCapability.Multimedia.Media.AVPlayer
         * @param type Type of the playback event to listen for.
         * @param callback Callback used to listen for the playback event return available bitrate list.
         */
        on(type: 'availableBitrates', callback: (bitrates: Array<number>) => void): void;
        off(type: 'availableBitrates'): void;
    

简单样例

avplayerdemo

  • 界面

    build() {
        Stack({ alignContent: Alignment.Center }) {
          if (this.isShowMenu) {
            Column() {
              //视频名称
              PlayTitle({ title: this.displayName, handleBack: this.handleBack })
              Row() {
                //播放控件
                PreVideo({ handleClick: this.handlePrevClick })
                PlayButton({ isPlaying: $isPlaying })
                NextVideo({ handleClick: this.handleNextClick })
              }
              .margin({ top: '40%' })
    
              Blank()
              //时间刻度
              Row() {
                Text(getTimeString(this.currentTime))
                  .fontSize(25)
                  .fontColor(Color.White)
                Blank()
                Text(this.fileAsset ? getTimeString(this.fileAsset.duration) : '00:00')
                  .fontSize(25)
                  .fontColor(Color.White)
              }
              .width('95%')
    		  //进度条
              Slider({ value: this.fileAsset ? this.currentTime / this.fileAsset.duration * 100 : 0 })
                .width('92%')
                .selectedColor(Color.White)
                .onChange((value: number) => {
                  Logger.info(TAG, 'seek time change')
                  this.currentTime = this.fileAsset.duration * value / 100
                  this.videoPlayer.seek(this.currentTime)
                })
            }
            .height('100%')
            .zIndex(2)
          }
          Row() {
            XComponent({
              id: 'componentId',
              type: 'surface',
              controller: this.mxcomponentController
            })
              .onLoad(() => {
                Logger.info(TAG, 'onLoad is called')
                this.playVideo()
              })
              .width('100%')
              .aspectRatio(this.ratio)
          }
          .height('100%')
          .width('100%')
          .justifyContent(FlexAlign.Center)
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Black)
        .onClick(() => {
          this.isShowMenu = !this.isShowMenu
        })
      }
    
  • 播放

      //根据视频文件获取视频源尺寸并生成surface
      //视频文件的路径在/storage/media/100/local/files/Videos
      async prepareVideo() {
        this.ratio = this.fileAsset.width / this.fileAsset.height
        this.mxcomponentController.setXComponentsurfaceSize({
          surfaceWidth: this.fileAsset.width,
          surfaceHeight: this.fileAsset.height
        })
        this.surfaceId = this.mxcomponentController.getXComponentsurfaceId()
        this.fd = await this.fileAsset.open('Rw')
        Logger.info(TAG, `fd://' ${this.fd} `)
        return 'fd://' + this.fd
      }
      //初始化视频文件并初始化avplayer
      async playVideo() {
        Logger.info(TAG, 'playVideo')
        try{
          await this.getMediaList()
          let fdPath = await this.prepareVideo()
          this.videoPlayer.on('timeUpdate', (time:number) => {
            console.info('timeUpdate success,and new time is :' + time)
            this.currentTime = time;
          })
          await this.videoPlayer.initVideoPlayer(fdPath, this.surfaceId)
          this.isPlaying = true
        }catch(error) {
          Logger.info(TAG, `playVideo error ${JSON.stringify(error)}`)
        }
      } 
    
    

小结

参考链接:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis/js-apis-media.md#play9

本文作者:左翼风发

想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com/#bkwz​

标签:播放器,创作者,鸿蒙,void,param,callback,AVPlayer,playback,type
From: https://blog.51cto.com/harmonyos/6172438

相关文章

  • vue做播放器和进度条
    <template><video-playerclass="video-playervjs-custom-skin"ref="videoPlayer":playsinline="true":options="playerOptions"@play="onPlayerPlay($event)"@pause="onP......
  • FFmpeg再学习 -- FFmpeg+SDL+MFC实现图形界面视频播放器
    继续看雷霄骅的课程资料-基于FFmpeg+SDL的视频播放器的制作最后一篇,主要是想学一下MFC创建和配置。一、创建MFC工程文件->新建->项目->VisualC++->MFC应用程序应用程序类型,选择基于对话框生成效果如下:二、设置控件找到“工具箱”,就可以将相应的控件拖拽至应用程序对话框......
  • 【妙用WebView】鸿蒙元服务中如何使用Java Script的API创建地图
    【关键字】webview地图高德腾讯地图百度地图 【问题背景】开发元服务过程中需要用到地图能力:卡片中显示我的快递位置和我的位置信息;PageAbility中可以打开自定义地图,查询POI点,做路径规划、路径推荐等;查看了高德、百度、华为、腾信地图的后发现,各大厂商对鸿蒙系统的支持能......
  • 鸿蒙开发学习笔记-UIAbility-Router页面跳转接口源码分析
    在鸿蒙开发中,UIAbility的跳转使用router方法.在使用的时候需导入importrouterfrom'@ohos.router';该方法接口成员如下:1.interfaceRouterOptionsinterfaceRouterOptions{url:string;//跳转页面的Urlparams?:Object;//传给跳转页面的参数params......
  • #创作者激励#OpenHarmony仿视频播放器应用-爱电影
    【本文正在参加2023年第一期优质创作者激励计划】作者:徐金生说在前面的话OpenHarmony标准系统已更新到了3.2beta5的版本,近期社区应该也会推出3.2release版本,甚是期待。......
  • #创作者激励# 高能预警,一篇5k字长文带你认识RTOS系统
    【本文正在参加2023年第一期优质创作者激励计划】在学习openharmony南向开发的时候,很多小伙伴不明白学习liteos-m内核编程代表什么,是什么意思,以及为什么要学习这个,今天......
  • flutter系列之:在flutter中使用媒体播放器
    目录简介使用前的准备工作在flutter中使用video_player总结简介现在的app功能越来越强大,除了基本的图文之外,还需要各种各样的其他的功能,比如视频,和直播。直播可能会比......
  • #创作者激励#使用OpenHarmonyNDK移植三方库Speexdsp
    【本文正在参加2023年第一期优质创作者激励计划】大家好,我是一名即将本科毕业的OpenHarmony开发者,去年暑假利用了两个月时间移植了一个语音处理的三方库Speexdsp到OpenHar......
  • #创作者激励# [FFH]标准系统HDF平台驱动(一)——ADC驱动适配
    【本文正在参加2023年第一期优质创作者激励计划】标准系统HDF平台驱动(一)——ADC驱动适配个人简介:深圳技术大学FSR实验室大三学生,正于九联科技实习,共同学习研究鸿蒙南向......
  • EasyCVR配置https证书后,取流集成至播放器无法播放的情况排查与解决
    EasyCVR平台可在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。平台可支持多协议、多类型......