【高心星出品】

AVPlayer倍速播放视频解决方案

点击按钮选择倍速

场景描述

通过点击按钮选择预设倍速实现倍速设置，为用户提供灵活的视频播放速率控制。

实现原理

根据选择的倍速调用视频播放器AVPlayer的setSpeed()方法设置对应值，实现视频播放倍速设置。

开发步骤

1. 可选择1.0X、1.25X、1.75X、2.0X，选择后调用对应的设置倍速方法。

     ForEach(this.speedList, (item: Resource, index) => {
       ListItem() {
         Column() {
           Row() {
             Text(item)
             // ...
             Blank()
             Image(this.speedSelect === index ? $r('app.media.ic_radio_selected') :
             $r('app.media.ic_radio'))
             // ...
           }
           // ...
         }
         .width('90%')
       }
       .width('100%')
       .height($r('app.float.size_48'))
       .onClick(() => {
         this.speedSelect = index;
         switch (this.speedSelect) {
           case ZERO:
             this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_00_X);
             break;
           case ONE:
             this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_25_X);
             break;
           case TWO:
             this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_75_X);
             break;
           case THREE:
             this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_2_00_X);
             break;
           default:
             break;
         }
         this.controller.close();
       })
     }, (item: Resource, index) => index + '_' + JSON.stringify(item))
   }
   

   代码逻辑走读：

   1. 遍历速度列表：使用ForEach函数遍历this.speedList，该列表包含了不同的播放速度选项。
   2. 创建列表项：对于每个速度选项，创建一个ListItem，内部包含一个Column组件。
   3. 构建行组件：在Column内部，构建一个Row组件，用于水平排列速度选项的文本和图标。
   4. 显示文本和图标：在Row中，使用Text组件显示速度选项的文本，使用Image组件显示速度选择图标。图标的选择依赖于当前选择的速度是否与列表项的索引匹配。
   5. 设置点击事件：为每个ListItem设置点击事件，当用户点击某个列表项时，更新this.speedSelect为当前的索引，并根据选择的速度调用avPlayerController.videoSpeed方法调整播放速度。
   6. 关闭控制器：在点击事件中，调用this.controller.close()方法关闭当前的控制器。

2. 设置倍速方法内调用视频播放器AVPlayer的setSpeed()方法实现设置倍速。

   videoSpeed(speed: number): void {
     if (this.avPlayer) {
       try {
         this.avPlayer.setSpeed(speed);
       } catch (err) {
         hilog.error(CommonConstants.LOG_DOMAIN, TAG,
           `videoSpeed failed, code is ${err.code}, message is ${err.message}`);
       }
     }
   }
   

   代码逻辑走读：

   1. 方法 videoSpeed接受一个参数 speed，类型为 number，表示视频播放速度。
   2. 检查 this.avPlayer是否存在，确保播放器实例可用。
   3. 使用try-catch块来处理可能的异常：
      • 在 try部分，调用 this.avPlayer.setSpeed(speed)方法来设置播放速度。
      • 如果发生错误，捕获异常并使用 hilog.error记录错误日志，日志中包含错误代码和错误信息。

长按手势调节倍速

场景描述

通过长按手势实现长按屏幕时2倍速播放，长按结束时恢复1倍速播放。

实现原理

通过为元素绑定长按手势事件，在长按手势开始时调用视频播放器AVPlayer的setSpeed()方法设置值为media.PlaybackSpeed.SPEED_FORWARD_2_00_X，实现长按时2倍速播放；长按结束后调用视频播放器AVPlayer的setSpeed()方法设置值为media.PlaybackSpeed.SPEED_FORWARD_1_00_X，恢复播放速度为1倍速。

开发步骤

1. 为元素绑定长按手势LongPressGesture事件，并调用封装的videoSpeed()方法，长按手势开始时传递参数为media.PlaybackSpeed.SPEED_FORWARD_2_00_X，设置播放速度为2倍速；长按手势结束时传递参数为media.PlaybackSpeed.SPEED_FORWARD_1_00_X，恢复播放速度为1倍速。

   .gesture(
     LongPressGesture({ repeat: true })
       .onAction(() => {
         this.speedSelect = CASE_THREE
         this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_2_00_X);
       })
       .onActionEnd(() => {
         this.speedSelect = CASE_ZERO
         this.avPlayerController.videoSpeed(media.PlaybackSpeed.SPEED_FORWARD_1_00_X);
       })
   )
   

   代码逻辑走读：

   1. 定义长按手势：使用LongPressGesture定义了一个长按手势，并设置repeat为true，表示长按时可以重复触发手势事件。
   2. 长按动作：当长按手势触发onAction事件时，将speedSelect状态变量设置为CASE_THREE，并调用avPlayerController.videoSpeed方法将播放速度设置为2倍速播放。
   3. 长按结束动作：当长按手势触发onActionEnd事件时，将speedSelect状态变量重置为CASE_ZERO，并调用avPlayerController.videoSpeed方法将播放速度恢复到正常速度。

2. 设置倍速方法内调用视频播放器AVPlayer的setSpeed()方法实现设置倍速。

   videoSpeed(speed: number): void {
     if (this.avPlayer) {
       try {
         this.avPlayer.setSpeed(speed);
       } catch (err) {
         hilog.error(CommonConstants.LOG_DOMAIN, TAG,
           `videoSpeed failed, code is ${err.code}, message is ${err.message}`);
       }
     }
   }
   

   代码逻辑走读：

   1. 方法 videoSpeed接受一个参数 speed，类型为 number，表示视频播放速度。
   2. 检查 this.avPlayer是否存在，确保播放器实例可用。
   3. 使用try-catch块来处理可能的异常：
      • 在 try部分，调用 this.avPlayer.setSpeed(speed)方法来设置播放速度。