HarmonyOS 鸿蒙Next 视频进度刻度条

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

HarmonyOS 鸿蒙Next 视频进度刻度条

介绍

本示例构建了一个视频播放进度条案例，主要实现的功能是为正在播放的视频添加一个刻度条组件用以表示进度。

视频进度刻度条案例源码链接

效果图

使用说明

  • 打开应用，展示待播放的视频以及播放、暂停两个按钮。
  • 点击播放按钮，视频播放，刻度条会随视频的进度条而移动。
  • 拖动刻度条也可以视频进度进行拖动。

实现思路

  1. 利用videoController简单的设置video的播放、暂停按钮控制。
Button("播放")
.onClick(() => {
   this.videoController.start()
})
Button("暂停")
.onClick(() => {
   this.videoController.pause()
})
  1. 定义一个名为 setScale 的函数，用于处理与缩放（scale）相关的操作，并根据缩放情况来调整一系列相关的变量值； 基于 barMultiple 调整其他关键变量，根据 this.barMultiple 的值进一步调整 this.stepVp 和 this.stepDuration 这两个变量； 计算与绘制准备相关逻辑；最后触发绘制操作，调用 this.drawBar() 函数
 setScale(scale: number): void {
   let scaleChange = scale - this.zoomSize
   ···
   this.zoomSize = scale
   ···
   let minUnit = this.stepVp / this.stepDuration
   let halfStep = this.canvasWidth / 2
   let currentStep = this.currentDuration * minUnit
   ···
   this.drawBar()
 }
  1. 构造videoPlaying()函数，进行触摸移动状态判断操作及早期返回，基于时间和画布宽度的计算与赋值调整，再次触摸移动状态判断及绘制触发。

 videoPlaying(time: number) {
   ···
   let minUnit = this.stepVp / this.stepDuration
   this.currentDuration = time
   this.currentTime = this.getTimeFromSeconds(this.currentDuration)
   let currentStep = this.currentDuration * minUnit
   ···
   let halfStep = this.canvasWidth / 2
   this.drawBar()
 }

  1. 构造penGestureUpdate()函数，进行基础变量计算与初始化，根据移动方向及相关条件处理movedX，更新当前时长及对应时间表示，基于当前时长的空间位置计算，触发绘制操作。
 penGestureUpdate(event: GestureEvent): void {
   let minUnit = this.stepVp / this.stepDuration
   let movedX = event.offsetX - this.lastTouchX
   this.lastTouchX = event.offsetX
   ···
   let maxMovedX = 0 - this.totalDuration * minUnit
   ···
     maxMovedX =  (this.currentDuration - this.totalDuration) * minUnit
     movedX = Math.floor(movedX / minUnit) * minUnit

this.currentDuration = this.currentDuration - movedX / minUnit
···
this.currentTime = this.getTimeFromSeconds(this.currentDuration)
let currentStep = this.currentDuration * minUnit
let halfStep = this.canvasWidth / 2
···
this.drawBar()
}

  1. 构造drawBar()函数，首先计算最小单位和相关尺度数量，绘制主水平线条，然后循环绘制刻度和时间描述。
 drawBar(): void {
   let minUnit = this.stepVp / this.stepDuration
   this.scalePaint!.clearRect(0, 0, this.canvasWidth, 80)

let totalScale = Math.ceil(this.totalDuration / this.stepDuration)
let maxWindowScale = Math.floor(this.canvasWidth / this.stepVp)


this.scalePaint!.beginPath()
this.scalePaint!.moveTo(0, 60)
this.scalePaint!.lineTo(this.canvasWidth, 60)
this.scalePaint!.stroke()


let firstStepDuration = Math.ceil(this.beginDuration / this.stepDuration) * this.stepDuration
let beginStep = Math.floor(firstStepDuration / this.stepDuration)
···
···
}

  1. 构造getTimeFromSeconds()函数，将秒数转换为小时、分钟和秒，return的时候使用字符串模板和padStart来确保小时、分钟和秒都是两位数。
 getTimeFromSeconds(seconds: number): string {

const hours = Math.floor(seconds / 3600); // 每小时3600秒
const minutes = Math.floor((seconds % 3600) / 60); // 剩余秒数转换为分钟
const remainingSeconds = Math.round(seconds % 60); // 剩余的秒数


// 使用字符串模板和padStart来确保小时、分钟和秒都是两位数
return <span class="hljs-subst">${hours.toString().padStart(<span class="hljs-number">2</span>, <span class="hljs-string">'0'</span>)}</span>:<span class="hljs-subst">${minutes.toString().padStart(<span class="hljs-number">2</span>, <span class="hljs-string">'0'</span>)}</span>:<span class="hljs-subst">${remainingSeconds.toString().padStart(<span class="hljs-number">2</span>, <span class="hljs-string">'0'</span>)}</span>;
}

工程目录

entry/src/main/ets/
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets
|---model
|   |---VideoProgressModel.ets       // 刻度条模型
|---pages
|   |---Index.ets                    // 主页
|   |---VideoPlayer.ets              // 视频播放
|   |---VideoProgressBar.ets         // 刻度条组件

更多关于HarmonyOS 鸿蒙Next 视频进度刻度条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 视频进度刻度条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现视频进度刻度条的功能，可以通过以下场景化代码进行开发。以下是一个简化的示例，展示了如何创建并更新视频进度条：

// 场景化页面的XML布局文件
<DirectionalLayout>
    <VideoPlayer
        id="videoPlayer"
        width="match_parent"
        height="300vp"
        src="$media:videoSource" />
    <Slider
        id="progressBar"
        width="match_parent"
        height="50vp"
        minValue="0"
        maxValue="100"
        value="0"
        onValueChanged="onSliderValueChanged" />
</DirectionalLayout>

// 场景化页面的逻辑文件
import media from '@ohos.multimedia.media';

@Entry
@Component
struct VideoPlayerPage {
    @State videoPlayer: media.Player = media.createPlayer(this.context);
    @State sliderValue: number = 0;

    onPageShow() {
        this.videoPlayer.on('durationchange', () => {
            this.sliderValue = Math.floor((this.videoPlayer.currentTime / this.videoPlayer.duration) * 100);
        });
    }

    onSliderValueChanged(event: any) {
        this.videoPlayer.currentTime = (event.value / 100) * this.videoPlayer.duration;
    }
}

该代码示例展示了如何在页面布局中添加视频播放器（VideoPlayer）和进度条（Slider），并通过监听视频时长变化来更新进度条的值，同时根据进度条的值调整视频播放进度。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部