HarmonyOS 鸿蒙Next 自定义视频控制器

发布于 1周前 作者 zlyuanteng 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义视频控制器

Slider({
value: this.currentTime,
min: 0,
max: this.duration,
onChange: (value: number, mode: SliderChangeMode) => {
this.currentTime = value;
this.controller.setCurrentTime(value, SeekMode.Accurate);
}
})

 在自定义视频控制中，这个方法为何是报错的？

onChange: (value: number, mode: SliderChangeMode) => {
this.currentTime = value;
this.controller.setCurrentTime(value, SeekMode.Accurate);
}


更多关于HarmonyOS 鸿蒙Next 自定义视频控制器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

我这么写是可以做到视频控制的

/*
基于video组件，实现视频播放功能,主要用于控制视频的状态，具体功能包括
* 播放、暂停、停止、跳转、设置进度等
*
 */
[@Entry](/user/Entry)
[@Component](/user/Component)
struct VideoCreateComponent {
  [@State](/user/State) duration: number =0 //当前视频的时长，单位为秒。
  [@State](/user/State) currentTime: number =0//当前视频播放的进度，单位为秒。
  // 调用接口来创建video组件加载本地视频，src指定视频播放源的路径，设置视频封面
  [@State](/user/State) videoSrc: Resource = $rawfile('video1.mp4')
  [@State](/user/State) previewUri: Resource = $r('app.media.startIcon')
  [@State](/user/State) curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X //是设置倍速播放
  [@State](/user/State) isAutoPlay: boolean = false
  [@State](/user/State) showControls: boolean = true
  // controller接口设置视频控制器，用于自定义控制视频，开始，暂停，结束，精准跳转
  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) => {
          this.duration = e.duration;
          console.info('onPrepared is ' + e.duration)
        })
        .onSeeking((e) => {
          console.info('onSeeking is ' + e.time)
        })
        .onSeeked((e) => {
          console.info('onSeeked is ' + e.time)
        })
        .onUpdate((e) => {
          this.currentTime = e.time;
          console.info('onUpdate is ' + e.time)
        })

  Row() {
    Button(<span class="hljs-string">'start'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.controller.start() <span class="hljs-comment">// 开始播放</span>
    }).margin(<span class="hljs-number">5</span>)
    Button(<span class="hljs-string">'pause'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.controller.pause() <span class="hljs-comment">// 暂停播放</span>
    }).margin(<span class="hljs-number">5</span>)
    Button(<span class="hljs-string">'stop'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.controller.stop() <span class="hljs-comment">// 结束播放</span>
    }).margin(<span class="hljs-number">5</span>)
    Button(<span class="hljs-string">'setTime'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.controller.setCurrentTime(<span class="hljs-number">10</span>, SeekMode.Accurate) <span class="hljs-comment">// 精准跳转到视频的10s位置</span>
    }).margin(<span class="hljs-number">5</span>)
  }
  Row() {
    Button(<span class="hljs-string">'rate 0.75'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.curRate = PlaybackSpeed.Speed_Forward_0_75_X <span class="hljs-comment">// 0.75倍速播放</span>
    }).margin(<span class="hljs-number">5</span>)
    Button(<span class="hljs-string">'rate 1'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.curRate = PlaybackSpeed.Speed_Forward_1_00_X <span class="hljs-comment">// 原倍速播放</span>
    }).margin(<span class="hljs-number">5</span>)
    Button(<span class="hljs-string">'rate 2'</span>).onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.curRate = PlaybackSpeed.Speed_Forward_2_00_X <span class="hljs-comment">// 2倍速播放</span>
    }).margin(<span class="hljs-number">5</span>)
  }
  Slider({
    value: <span class="hljs-keyword">this</span>.currentTime,
    min: <span class="hljs-number">0</span>,
    max: <span class="hljs-keyword">this</span>.duration,
  })
    .onChange((value: number, mode: SliderChangeMode) =&gt; {
      <span class="hljs-keyword">this</span>.controller.start() <span class="hljs-comment">// 开始播放</span>
      <span class="hljs-keyword">this</span>.currentTime = value;
      <span class="hljs-keyword">this</span>.controller.setCurrentTime(value, SeekMode.Accurate);
    })
}

}}

更多关于HarmonyOS 鸿蒙Next 自定义视频控制器的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


对于HarmonyOS鸿蒙Next自定义视频控制器的问题，以下是一些专业解答：

在HarmonyOS鸿蒙Next系统中，自定义视频控制器涉及对媒体播放控件的深入操作和UI定制。要实现这一点，首先需要了解鸿蒙系统提供的媒体播放组件及其API接口。通过这些接口，开发者可以获取视频播放的当前状态（如播放、暂停、进度等），并据此更新自定义控制面板的UI。

接下来，设计并实现一个符合应用风格的UI界面，包括布局设计、控件选择和事件处理。在布局设计中，要确保控件的位置、大小和交互方式都符合用户体验的最佳实践。在事件处理方面，为自定义控制面板的控件（如播放/暂停按钮、进度条等）添加相应的事件监听器，以便在用户交互时能够正确地调用媒体播放API来更新视频播放状态。

此外，还需考虑在不同设备和屏幕尺寸下的适配问题，确保自定义控制面板在各种环境下都能良好地显示和交互。同时，如果自定义视频控制器需要支持遥控器操作，则需确保系统支持遥控器事件监听，并通过API监听遥控器事件，如方向键、播放/暂停键等，然后将这些事件与相应的处理函数绑定。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部