界面效果图:
运行效果图:
底部滑轨的基本逻辑,通过设置一个定时器,每0.1-0.5秒触发一次来不断更新左侧播放时间和滑块的位置!
ts
// 这里为ArkTS代码,标记为ts只是为了上色好看。注意代码放置位置
//1.状态值添加,在buid()函数中添加
// 当前时间
@State currentTime: string = "00:00";
// 总时间
@State totalTime: string = "00:00";
// 进程值,指示了滑轨位置
@State progressValue: number = 0;
// 视频Slider默认不开启交互
@State sliderEnable: boolean = false;
// 1.布局代码
Row(){
Text(this.currentTime).width('60px').fontSize('20px').margin('10px')
// 以下参数内容可以参加官方API文档有关Slider组件的说明
Slider({
value: this.progressValue,
min: 0,
max: 100,
step: 1,
style: SliderStyle.OutSet
})
.height('20px')
.width('650px')
// 颜色自定义即可
.blockColor($r('app.color.slider_block_color'))
.trackColor($r('app.color.slider_track_color'))
.selectedColor($r('app.color.slider_selected_color'))
.showSteps(true)
.showTips(true)
// 是否开启滑轨交互逻辑,如果没有复杂功能,可以开启,这里我设置为默认不开启
.enabled(this.sliderEnable)
}
.height('50px')
//2.设置定时器,自动更新视频轨道左边的时间,已经视频轨道滑块的位置
// 每隔0.3s执行更新slider操作
startSliderTimer() {
// 需要在buid()函数外面,初始化变量 sliderTimer,设置的目的在于方便关闭定时器
sliderTimer = setInterval(() => {
LogUtils.getInstance().LOGI("plumcarefree startSliderTimer");
// 暂未实现,参见步骤7
this.setLocation();
}, 300);
}
//3. 关闭定时器函数
private stopSliderTimer() {
LogUtils.getInstance().LOGI("plumcarefree stopSliderTimer");
clearInterval(sliderTimer);
}
//4.设置定时器触发开始位置
// 这里我是当XComponent组件初始化的时候,直接调用startPlay()函数,
startPlay() {
// 调用play方法播放视频
this.play(this.playerURL);
// 设置底部slider定时器开始
this.startSliderTimer();
}
//5.设置定时器触发结束位置
// 退出XComponent后释放资源,避免退出组件后仍然在持续接受流的情况
releaseMediaPlayer() {
mIjkMediaPlayer.stop();
mIjkMediaPlayer.release();
this.stopSliderTimer()
}
//6.检查XComponent组件代码
XComponent({
id: 'xcomponentId',
type: 'surface',
libraryname: 'ijkplayer_napi'
})
.onLoad((context?: object) => {
if (!!context) {
this.mContext = context;
this.startPlay();
}
})
.onDestroy(() => {
this.releaseMediaPlayer();
})
.width('100%')
//7. 设置步骤二的核心函数,setProgress()
// 设置视频总时间和当前时间
setLocation() {
// 获取当前视频播放位置(毫秒)
let position = mIjkMediaPlayer.getCurrentPosition();
// 获取视频总时长(毫秒)
let duration = mIjkMediaPlayer.getDuration();
// 如果视频总时长大于0,则计算进度百分比并更新进度条
if (duration > 0) {
this.sliderEnable = true; // 启用进度条
let percent = position / duration; // 计算当前播放位置占总时长的百分比
let value = percent * 100; // 将百分比转换为进度条值
this.progressValue = value; // 更新进度条值
}
// 格式化视频总时长并更新显示
this.totalTime = this.setTimeFormat(duration);
// 如果当前播放位置超过总时长,则设置为总时长
if (position > duration) {
position = duration;
}
// 格式化当前播放时间并更新显示
this.currentTime = this.setTimeFormat(position);
}
//8. 设置时间格式调整函数
// 时间格式调整函数
setTimeFormat(duration: number): string {
// 将毫秒转换为秒
let totalSeconds: number | string = duration / 1000;
// 计算秒数,取余得到不足一分钟的秒数
let seconds: number | string = Math.floor(totalSeconds % 60);
// 计算分钟数,取余得到不足一小时的分钟数
let minutes: number | string = Math.floor(totalSeconds / 60) % 60;
// 计算小时数
let hours: number | string = Math.floor(totalSeconds / 3600);
// 调用completionNum函数,确保时间显示为两位数
seconds = this.setCompleteNumber(seconds);
minutes = this.setCompleteNumber(minutes);
hours = this.setCompleteNumber(hours);
// 根据小时数决定时间格式
if (hours > 0) {
// 如果小时数大于0,则格式化为小时:分钟:秒
return `${hours}:${minutes}:${seconds}`;
} else {
// 否则只格式化为分钟:秒
return `${minutes}:${seconds}`;
}
}
// 补全数字为两位数的函数
setCompleteNumber(num: number): string | number{
// 如果数字小于10,前面补0
return num < 10 ? '0' + num : num;
}