devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙实战开发：视频播放器实现（上）_鸿蒙 avplayer用法

作者：神奇cpp | 2024-07-28 15:35:41

赞

踩

鸿蒙 avplayer用法

鸿蒙实战开发：视频播放器实现（上） 

鸿蒙实战开发：视频播放器实现（中）

鸿蒙实战开发：视频播放器实现（下） 

ArkTS 提供了 @ohos.multimedia.media 模块来处理音视频相关媒体业务，它提供了音视频播放和录制的功能，通过 AVPlayer 类，可以实现音视频的播放。下面我们使用AVPlayer实现一个简单的视频播放器。

AVPlayer的工作流程

在正式进入播放器开发前，我们先来认识一下AVPlayer的工作流程，下图是根据官方的状态变化示意图重新绘制的流程图：

  1. 我们要实现一个播放器，首先需要使用createAVPlayer()创建一个播放器实例，此时播放器会进入idle状态，也就是闲置状态。如果我们调用了reset()来重置播放器，此时播放器也会进入闲置状态
  2. 在闲置状态，给播放器设置播放源，即设置播放器的 url 或 的 fdSrc，播放器就会进入initialized状态，也就是初始化状态。在初始化状态，需要给播放器配置播放窗口，才能显示视频画面。
  3. 在初始化状态调用prepare()方法，播放器会进入prepared状态，也就是准备状态，此时播放器的资源已准备就绪。如果在播放器的停止状态调用了prepare()方法，播放器会重新进入prepared状态。
  4. 在准备状态调用play()方法，播放器就会进入playing状态，即正在播放状态。如果在播放器的停止、播放完成状态调用play()方法，播放器会重新进入播放状态。
  5. 在播放状态中调用了pause()方法，播放器就会进入paused状态，即暂停状态。如果此时调用了play()方法，播放器会进入playing状态，继续播放媒体资源。
  6. 当媒体资源播放至结尾时，如果用户没有设置循环播放(loop = 1)，播放器就会进入completed状态，即完成状态。如果这个时候调用play()会进入playing状态重播媒体资源。
  7. 在prepared、playing、paused、completed状态是调用stop()方法，播放器就会进入stopped状态，即停止状态，此时的播放器会释放内存资源。在这个时候，可以调用prepare()方法让播放器进入准备状态，重新播放媒体资源。也可以调用reset()方法重置播放器，让其回到闲置状态，或者调用release()方法彻底销毁播放器。

了解完播放器的工作流程后，我们就正式开始播放器的开发。

视频播放器实现

实现播放器的核心，就是监听播放器状态，在对应的状态中执行下一步的动作。

1、创建播放器

首先我们建一个播放器工具类，在工具类中使用media.createAVPlayer() 方法创建一个AVPlayer播放器实例。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.   
  7.   // 创建播放器的方法
  8.   static async  init() {
  9.  
  10.     // 创建播放器实例
  11.     VideoAVPlayerClass.player = await media.createAVPlayer()
  12.     
  13.   }
  14. }

2、监听状态

因为播放器的实现核心，就是监听播放器状态，然后在对应的状态中执行下一步动作。同时，我们也需要根据播放器的状态来设置页面的展示，因此需要监听播放器的状态。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.   
  7.   // 创建播放器的方法
  8.   static async  init() {
  9.  
  10.     // 创建播放器实例
  11.     VideoAVPlayerClass.player = await media.createAVPlayer()
  12.  
  13.     // ----------------------- 事件监听 --------------------------------------------------------------
  14.  
  15.     // 用于进度条，监听进度条长度，刷新资源时长
  16.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  17.       console.info('AVPlayer state durationUpdate called. current time: ', duration);
  18.     })
  19.  
  20.     // 用于进度条，监听进度条当前位置，刷新当前时间
  21.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  22.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  23.     })
  24.  
  25.     // 监听seek生效的事件
  26.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  27.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  28.       VideoAVPlayerClass.avPlayer.play()
  29.       VideoAVPlayerClass.isPlay = true
  30.     })
  31.  
  32.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  33.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  34.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  35.       // 调用reset重置资源，触发idle状态
  36.       VideoAVPlayerClass.avPlayer.reset()
  37.     })
  38.  
  39.     // 监听播放状态机AVPlayerState切换的事件
  40.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  41.       switch (state) {
  42.       // 成功调用reset接口后触发该状态机上报
  43.         case 'idle':
  44.           console.info('AVPlayer state idle called.');
  45.           break
  46.  
  47.        // avplayer 设置播放源后触发该状态上报
  48.         case 'initialized':
  49.           console.info('AVPlayerstate initialized called.');
  50.           break
  51.  
  52.       // prepare调用成功后上报该状态机
  53.         case 'prepared':
  54.           console.info('AVPlayer state prepared called.');
  55.           break
  56.  
  57.       // play成功调用后触发该状态机上报
  58.         case 'playing':
  59.           console.info('AVPlayer state playing called.');
  60.           break
  61.  
  62.       // pause成功调用后触发该状态机上报
  63.         case 'paused':
  64.           console.info('AVPlayer state paused called.');
  65.           break
  66.  
  67.       // 播放结束后触发该状态机上报
  68.         case 'completed':
  69.           console.info('AVPlayer state completed called.');
  70.           break
  71.  
  72.       // stop接口成功调用后触发该状态机上报
  73.         case 'stopped':
  74.           console.info('AVPlayer state stopped called.');
  75.         // 调用reset接口初始化avplayer状态
  76.           VideoAVPlayerClass.avPlayer.reset()
  77.           break
  78.  
  79.         case 'released':
  80.           console.info('AVPlayer state released called.');
  81.           break;
  82.  
  83.         default:
  84.           console.info('AVPlayer state unknown called.');
  85.           break;
  86.       }
  87.     })
  88.   }
  89. }

在当前的实现中，我们主要监听了播放器的durationUpdate、timeUpdate、seekDone、stateChange事件。

3、设置播放源

我们提供一个changePlay方法，在这个方法中完成播放源的设置，在设置播放源前，应该先将播放器的状态重置为闲置状态。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.   
  7.   // 创建播放器的方法
  8.   static async  init() {
  9.  
  10.     // 创建播放器实例
  11.     VideoAVPlayerClass.player = await media.createAVPlayer()
  12.  
  13.     // ----------------------- 事件监听 --------------------------------------------------------------
  14.  
  15.     // 用于进度条，监听进度条长度，刷新资源时长
  16.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  17.       console.info('AVPlayer state durationUpdate called. current time: ', duration);
  18.     })
  19.  
  20.     // 用于进度条，监听进度条当前位置，刷新当前时间
  21.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  22.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  23.     })
  24.  
  25.     // 监听seek生效的事件
  26.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  27.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  28.       VideoAVPlayerClass.avPlayer.play()
  29.       VideoAVPlayerClass.isPlay = true
  30.     })
  31.  
  32.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  33.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  34.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  35.       // 调用reset重置资源，触发idle状态
  36.       VideoAVPlayerClass.avPlayer.reset()
  37.     })
  38.  
  39.     // 监听播放状态机AVPlayerState切换的事件
  40.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  41.       switch (state) {
  42.       // 成功调用reset接口后触发该状态机上报
  43.         case 'idle':
  44.           console.info('AVPlayer state idle called.');
  45.           break
  46.  
  47.        // avplayer 设置播放源后触发该状态上报
  48.         case 'initialized':
  49.           console.info('AVPlayerstate initialized called.');
  50.           break
  51.  
  52.       // prepare调用成功后上报该状态机
  53.         case 'prepared':
  54.           console.info('AVPlayer state prepared called.');
  55.           break
  56.  
  57.       // play成功调用后触发该状态机上报
  58.         case 'playing':
  59.           console.info('AVPlayer state playing called.');
  60.           break
  61.  
  62.       // pause成功调用后触发该状态机上报
  63.         case 'paused':
  64.           console.info('AVPlayer state paused called.');
  65.           break
  66.  
  67.       // 播放结束后触发该状态机上报
  68.         case 'completed':
  69.           console.info('AVPlayer state completed called.');
  70.           break
  71.  
  72.       // stop接口成功调用后触发该状态机上报
  73.         case 'stopped':
  74.           console.info('AVPlayer state stopped called.');
  75.         // 调用reset接口初始化avplayer状态
  76.           VideoAVPlayerClass.avPlayer.reset()
  77.           break
  78.  
  79.         case 'released':
  80.           console.info('AVPlayer state released called.');
  81.           break;
  82.  
  83.         default:
  84.           console.info('AVPlayer state unknown called.');
  85.           break;
  86.       }
  87.     })
  88.   }
  89.  
  90.   
  91.   static async changePlay() {
  92.     // 将播放状态置为闲置
  93.     await VideoAVPlayerClass.avPlayer.reset()
  94.  
  95.     VideoAVPlayerClass.avPlayer.url = VideoAVPlayerClass.playList[VideoAVPlayerClass.playIndex].url
  96.   }
  97. }

4、设置播放窗口

用AVPlayer播放视频，需要设置播放窗口才能显示画面，从XComponent组件获取surfaceId后设置给播放器实例的surfaceId属性。

首先在播放器类中定义一个surfaceId变量来存储从XComponent组件获取的surfaceId，然后在init()方法中将surfaceId存储到播放器类上，在播放器的初始化状态设置播放器的播放窗口。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.  
  7.   // surfaceID用于播放画面显示，具体的值需要通过XComponent接口获取
  8.   static surfaceId: string = ''
  9.   
  10.   // 创建播放器的方法
  11.   static async init(initParams: InitParams) {
  12.  
  13.     // 存储属性SurfaceID，用于设置播放窗口，显示画面
  14.     VideoAVPlayerClass.surfaceId = initParams.surfaceId
  15.  
  16.     // 创建播放器实例
  17.     VideoAVPlayerClass.player = await media.createAVPlayer()
  18.  
  19.     // ----------------------- 事件监听 --------------------------------------------------------------
  20.  
  21.     // 用于进度条，监听进度条长度，刷新资源时长
  22.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  23.       console.info('AVPlayer state durationUpdate called. current time: ', duration);
  24.     })
  25.  
  26.     // 用于进度条，监听进度条当前位置，刷新当前时间
  27.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  28.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  29.     })
  30.  
  31.     // 监听seek生效的事件
  32.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  33.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  34.       VideoAVPlayerClass.avPlayer.play()
  35.       VideoAVPlayerClass.isPlay = true
  36.     })
  37.  
  38.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  39.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  40.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  41.       // 调用reset重置资源，触发idle状态
  42.       VideoAVPlayerClass.avPlayer.reset()
  43.     })
  44.  
  45.     // 监听播放状态机AVPlayerState切换的事件
  46.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  47.       switch (state) {
  48.       // 成功调用reset接口后触发该状态机上报
  49.         case 'idle':
  50.           console.info('AVPlayer state idle called.');
  51.           break
  52.  
  53.        // avplayer 设置播放源后触发该状态上报
  54.         case 'initialized':
  55.           console.info('AVPlayerstate initialized called.');
  56.           // 设置显示画面，当播放的资源为纯音频时无需设置
  57.           VideoAVPlayerClass.avPlayer.surfaceId = VideoAVPlayerClass.surfaceId
  58.           break
  59.  
  60.       // prepare调用成功后上报该状态机
  61.         case 'prepared':
  62.           console.info('AVPlayer state prepared called.');
  63.           break
  64.  
  65.       // play成功调用后触发该状态机上报
  66.         case 'playing':
  67.           console.info('AVPlayer state playing called.');
  68.           break
  69.  
  70.       // pause成功调用后触发该状态机上报
  71.         case 'paused':
  72.           console.info('AVPlayer state paused called.');
  73.           break
  74.  
  75.       // 播放结束后触发该状态机上报
  76.         case 'completed':
  77.           console.info('AVPlayer state completed called.');
  78.           break
  79.  
  80.       // stop接口成功调用后触发该状态机上报
  81.         case 'stopped':
  82.           console.info('AVPlayer state stopped called.');
  83.         // 调用reset接口初始化avplayer状态
  84.           VideoAVPlayerClass.avPlayer.reset()
  85.           break
  86.  
  87.         case 'released':
  88.           console.info('AVPlayer state released called.');
  89.           break;
  90.  
  91.         default:
  92.           console.info('AVPlayer state unknown called.');
  93.           break;
  94.       }
  95.     })
  96.   }
  97.  
  98.   
  99.   static async changePlay() {
  100.     // 将播放状态置为闲置
  101.     await VideoAVPlayerClass.avPlayer.reset()
  102.  
  103.     VideoAVPlayerClass.avPlayer.url = VideoAVPlayerClass.playList[VideoAVPlayerClass.playIndex].url
  104.   }
  105. }

5、获取播放信息

在页面中，需要展示当前播放视频的视频时长、播放时长以及播放器状态，因此我们需要获取视频的播放信息。我们先获取视频时长、当前播放时长、视频是否播放这三个播放信息。

  • 获取视频时长

通过监听播放器的durationUpdate事件，可以获取视频资源的总时长。在播放器类中定义一个duration变量来存储视频时长，然后监听durationUpdate事件获取视频时长。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.  
  7.   // 当前播放器播放视频的总时长
  8.   static duration: number = 0
  9.  
  10.   // surfaceID用于播放画面显示，具体的值需要通过XComponent接口获取
  11.   static surfaceId: string = ''
  12.   
  13.   // 创建播放器的方法
  14.   static async init(initParams: InitParams) {
  15.  
  16.     // 存储属性SurfaceID，用于设置播放窗口，显示画面
  17.     VideoAVPlayerClass.surfaceId = initParams.surfaceId
  18.  
  19.     // 创建播放器实例
  20.     VideoAVPlayerClass.player = await media.createAVPlayer()
  21.  
  22.     // ----------------------- 事件监听 --------------------------------------------------------------
  23.  
  24.     // 用于进度条，监听进度条长度，刷新资源时长
  25.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  26.         console.info('AVPlayer state durationUpdate called. current time: ', duration);
  27.         // 获取视频总时长
  28.         VideoAVPlayerClass.duration = duration
  29.     })
  30.  
  31.     // 用于进度条，监听进度条当前位置，刷新当前时间
  32.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  33.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  34.     })
  35.  
  36.     // 监听seek生效的事件
  37.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  38.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  39.       VideoAVPlayerClass.avPlayer.play()
  40.       VideoAVPlayerClass.isPlay = true
  41.     })
  42.  
  43.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  44.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  45.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  46.       // 调用reset重置资源，触发idle状态
  47.       VideoAVPlayerClass.avPlayer.reset()
  48.     })
  49.  
  50.     // 监听播放状态机AVPlayerState切换的事件
  51.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  52.       switch (state) {
  53.       // 成功调用reset接口后触发该状态机上报
  54.         case 'idle':
  55.           console.info('AVPlayer state idle called.');
  56.           break
  57.  
  58.        // avplayer 设置播放源后触发该状态上报
  59.         case 'initialized':
  60.           console.info('AVPlayerstate initialized called.');
  61.           // 设置显示画面，当播放的资源为纯音频时无需设置
  62.           VideoAVPlayerClass.avPlayer.surfaceId = VideoAVPlayerClass.surfaceId
  63.           break
  64.  
  65.       // prepare调用成功后上报该状态机
  66.         case 'prepared':
  67.           console.info('AVPlayer state prepared called.');
  68.           break
  69.  
  70.       // play成功调用后触发该状态机上报
  71.         case 'playing':
  72.           console.info('AVPlayer state playing called.');
  73.           break
  74.  
  75.       // pause成功调用后触发该状态机上报
  76.         case 'paused':
  77.           console.info('AVPlayer state paused called.');
  78.           break
  79.  
  80.       // 播放结束后触发该状态机上报
  81.         case 'completed':
  82.           console.info('AVPlayer state completed called.');
  83.           break
  84.  
  85.       // stop接口成功调用后触发该状态机上报
  86.         case 'stopped':
  87.           console.info('AVPlayer state stopped called.');
  88.         // 调用reset接口初始化avplayer状态
  89.           VideoAVPlayerClass.avPlayer.reset()
  90.           break
  91.  
  92.         case 'released':
  93.           console.info('AVPlayer state released called.');
  94.           break;
  95.  
  96.         default:
  97.           console.info('AVPlayer state unknown called.');
  98.           break;
  99.       }
  100.     })
  101.   }
  102.  
  103.   
  104.   static async changePlay() {
  105.     // 将播放状态置为闲置
  106.     await VideoAVPlayerClass.avPlayer.reset()
  107.  
  108.     VideoAVPlayerClass.avPlayer.url = VideoAVPlayerClass.playList[VideoAVPlayerClass.playIndex].url
  109.   }
  110. }

  • 获取当前播放时长

通过监听播放器的timeUpdate事件，可以获取当前的播放时长。在播放器类中定义一个

timeUpdate变量来存储当前播放时长，然后监听timeUpdate事件获取视频当前播放时长。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.  
  7.   // 当前播放器播放视频的总时长
  8.   static duration: number = 0
  9.  
  10.   // 当前播放器播放的时长
  11.   static time: number = 0
  12.  
  13.   // surfaceID用于播放画面显示，具体的值需要通过XComponent接口获取
  14.   static surfaceId: string = ''
  15.   
  16.   // 创建播放器的方法
  17.   static async init(initParams: InitParams) {
  18.  
  19.     // 存储属性SurfaceID，用于设置播放窗口，显示画面
  20.     VideoAVPlayerClass.surfaceId = initParams.surfaceId
  21.  
  22.     // 创建播放器实例
  23.     VideoAVPlayerClass.player = await media.createAVPlayer()
  24.  
  25.     // ----------------------- 事件监听 --------------------------------------------------------------
  26.  
  27.     // 用于进度条，监听进度条长度，刷新资源时长
  28.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  29.         console.info('AVPlayer state durationUpdate called. current time: ', duration);
  30.         // 获取视频总时长
  31.         VideoAVPlayerClass.duration = duration
  32.     })
  33.  
  34.     // 用于进度条，监听进度条当前位置，刷新当前时间
  35.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  36.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  37.       // 获取当前播放时长
  38.       VideoAVPlayerClass.time = time
  39.     })
  40.  
  41.     // 监听seek生效的事件
  42.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  43.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  44.       VideoAVPlayerClass.avPlayer.play()
  45.       VideoAVPlayerClass.isPlay = true
  46.     })
  47.  
  48.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  49.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  50.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  51.       // 调用reset重置资源，触发idle状态
  52.       VideoAVPlayerClass.avPlayer.reset()
  53.     })
  54.  
  55.     // 监听播放状态机AVPlayerState切换的事件
  56.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  57.       switch (state) {
  58.       // 成功调用reset接口后触发该状态机上报
  59.         case 'idle':
  60.           console.info('AVPlayer state idle called.');
  61.           break
  62.  
  63.        // avplayer 设置播放源后触发该状态上报
  64.         case 'initialized':
  65.           console.info('AVPlayerstate initialized called.');
  66.           // 设置显示画面，当播放的资源为纯音频时无需设置
  67.           VideoAVPlayerClass.avPlayer.surfaceId = VideoAVPlayerClass.surfaceId
  68.           break
  69.  
  70.       // prepare调用成功后上报该状态机
  71.         case 'prepared':
  72.           console.info('AVPlayer state prepared called.');
  73.           break
  74.  
  75.       // play成功调用后触发该状态机上报
  76.         case 'playing':
  77.           console.info('AVPlayer state playing called.');
  78.           break
  79.  
  80.       // pause成功调用后触发该状态机上报
  81.         case 'paused':
  82.           console.info('AVPlayer state paused called.');
  83.           break
  84.  
  85.       // 播放结束后触发该状态机上报
  86.         case 'completed':
  87.           console.info('AVPlayer state completed called.');
  88.           break
  89.  
  90.       // stop接口成功调用后触发该状态机上报
  91.         case 'stopped':
  92.           console.info('AVPlayer state stopped called.');
  93.         // 调用reset接口初始化avplayer状态
  94.           VideoAVPlayerClass.avPlayer.reset()
  95.           break
  96.  
  97.         case 'released':
  98.           console.info('AVPlayer state released called.');
  99.           break;
  100.  
  101.         default:
  102.           console.info('AVPlayer state unknown called.');
  103.           break;
  104.       }
  105.     })
  106.   }
  107.  
  108.   
  109.   static async changePlay() {
  110.     // 将播放状态置为闲置
  111.     await VideoAVPlayerClass.avPlayer.reset()
  112.  
  113.     VideoAVPlayerClass.avPlayer.url = VideoAVPlayerClass.playList[VideoAVPlayerClass.playIndex].url
  114.   }
  115. }

获取是否播放状态

页面需要根据是否播放状态来展示播放/暂停按钮，因此我们需要记录是否播放状态。在播放器类中定义isPlay变量来记录是否播放状态，默认是暂停状态。

  1. import media from '@ohos.multimedia.media'
  2.  
  3. export class VideoAVPlayerClass {
  4.   // 创建的播放器应该存在我们的工具类上，这样才能被导出使用
  5.   static player: media.AVPlayer | null = null
  6.  
  7.   // 当前播放器播放视频的总时长
  8.   static duration: number = 0
  9.  
  10.   // 当前播放器播放的时长
  11.   static time: number = 0
  12.  
  13.   // 当前播放器是否播放
  14.   static isPlay: boolean = false
  15.  
  16.   // surfaceID用于播放画面显示，具体的值需要通过XComponent接口获取
  17.   static surfaceId: string = ''
  18.   
  19.   // 创建播放器的方法
  20.   static async init(initParams: InitParams) {
  21.  
  22.     // 存储属性SurfaceID，用于设置播放窗口，显示画面
  23.     VideoAVPlayerClass.surfaceId = initParams.surfaceId
  24.  
  25.     // 创建播放器实例
  26.     VideoAVPlayerClass.player = await media.createAVPlayer()
  27.  
  28.     // ----------------------- 事件监听 --------------------------------------------------------------
  29.  
  30.     // 用于进度条，监听进度条长度，刷新资源时长
  31.     VideoAVPlayerClass.avPlayer.on('durationUpdate', (duration: number) => {
  32.         console.info('AVPlayer state durationUpdate called. current time: ', duration);
  33.         // 获取视频总时长
  34.         VideoAVPlayerClass.duration = duration
  35.     })
  36.  
  37.     // 用于进度条，监听进度条当前位置，刷新当前时间
  38.     VideoAVPlayerClass.avPlayer.on('timeUpdate', (time) =>{
  39.       console.info('AVPlayer state timeUpdate called. current time: ', time);
  40.       // 获取当前播放时长
  41.       VideoAVPlayerClass.time = time
  42.     })
  43.  
  44.     // 监听seek生效的事件
  45.     VideoAVPlayerClass.avPlayer.on('seekDone', (seekDoneTime: number) => {
  46.       console.info(`AVPlayer seek succeeded, seek time is ${seekDoneTime}`);
  47.       VideoAVPlayerClass.avPlayer.play()
  48.       VideoAVPlayerClass.isPlay = true
  49.     })
  50.  
  51.     // 监听视频播放错误事件,当avPlayer在操作过程中出现错误时调用reset接口触发重置流程
  52.     VideoAVPlayerClass.avPlayer.on('error', (err) => {
  53.       console.error(`Invoke avPlayer failed, code is ${err.code}, message is ${err.message}`);
  54.       // 调用reset重置资源，触发idle状态
  55.       VideoAVPlayerClass.avPlayer.reset()
  56.     })
  57.  
  58.     // 监听播放状态机AVPlayerState切换的事件
  59.     VideoAVPlayerClass.avPlayer.on('stateChange', async (state: media.AVPlayerState, reason: media.StateChangeReason) => {
  60.       switch (state) {
  61.       // 成功调用reset接口后触发该状态机上报
  62.         case 'idle':
  63.           console.info('AVPlayer state idle called.');
  64.           break
  65.  
  66.        // avplayer 设置播放源后触发该状态上报
  67.         case 'initialized':
  68.           console.info('AVPlayerstate initialized called.');
  69.           // 设置显示画面，当播放的资源为纯音频时无需设置
  70.           VideoAVPlayerClass.avPlayer.surfaceId = VideoAVPlayerClass.surfaceId
  71.           break
  72.  
  73.       // prepare调用成功后上报该状态机
  74.         case 'prepared':
  75.           console.info('AVPlayer state prepared called.');
  76.           break
  77.  
  78.       // play成功调用后触发该状态机上报
  79.         case 'playing':
  80.           console.info('AVPlayer state playing called.');
  81.           break
  82.  
  83.       // pause成功调用后触发该状态机上报
  84.         case 'paused':
  85.           console.info('AVPlayer state paused called.');
  86.           break
  87.  
  88.       // 播放结束后触发该状态机上报
  89.         case 'completed':
  90.           console.info('AVPlayer state completed called.');
  91.           break
  92.  
  93.       // stop接口成功调用后触发该状态机上报
  94.         case 'stopped':
  95.           console.info('AVPlayer state stopped called.');
  96.         // 调用reset接口初始化avplayer状态
  97.           VideoAVPlayerClass.avPlayer.reset()
  98.           break
  99.  
  100.         case 'released':
  101.           console.info('AVPlayer state released called.');
  102.           break;
  103.  
  104.         default:
  105.           console.info('AVPlayer state unknown called.');
  106.           break;
  107.       }
  108.     })
  109.   }
  110.  
  111.   
  112.   static async changePlay() {
  113.     // 将播放状态置为闲置
  114.     await VideoAVPlayerClass.avPlayer.reset()
  115.  
  116.     VideoAVPlayerClass.avPlayer.url = VideoAVPlayerClass.playList[VideoAVPlayerClass.playIndex].url
  117.   }
  118. }

至此，我们实现了播放器的一些基本设置，还不能实现视频的播放，视频的播放功能实现将在下一篇分享

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

为了能够帮助大家快速掌握鸿蒙（HarmonyOS NEXT）应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

 获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号