首先在rawfile文件夹里面放一个mp4文件
自定义Video组件
在videoSrc里面加上播放源的位置
// xxx.ets
@Component
export struct VideoCreateComponent {
@State videoSrc: Resource = $rawfile('1.mp4')
@State previewUri: Resource = $r('app.media.background')
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State isAutoPlay: boolean = false
@State showControls: boolean = true
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?: DurationObject) => {
if (e != undefined) {
console.info('onPrepared is ' + e.duration)
}
})
.onSeeking((e?: TimeObject) => {
if (e != undefined) {
console.info('onSeeking is ' + e.time)
}
})
.onSeeked((e?: TimeObject) => {
if (e != undefined) {
console.info('onSeeked is ' + e.time)
}
})
.onUpdate((e?: TimeObject) => {
if (e != undefined) {
console.info('onUpdate is ' + e.time)
}
})
Row() {
Button('start').onClick(() => {
this.controller.start() // 开始播放
}).margin(5)
Button('pause').onClick(() => {
this.controller.pause() // 暂停播放
}).margin(5)
Button('stop').onClick(() => {
this.controller.stop() // 结束播放
}).margin(5)
Button('setTime').onClick(() => {
this.controller.setCurrentTime(10, SeekMode.Accurate) // 精准跳转到视频的10s位置
}).margin(5)
}
Row() {
Button('rate 0.75').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X // 0.75倍速播放
}).margin(5)
Button('rate 1').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_1_00_X // 原倍速播放
}).margin(5)
Button('rate 2').onClick(() => {
this.curRate = PlaybackSpeed.Speed_Forward_2_00_X // 2倍速播放
}).margin(5)
}
}
}
}
interface DurationObject {
duration: number;
}
interface TimeObject {
time: number;
}
接着在Struct Index结构体里面加入VideoCreateComponent组件
运行模拟器就可以看到本地视频啦
总结,这只是测试案例,videoSrc并不是固定死的,可由外部传入
写在最后
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术?也不知道鸿蒙开发的知识点重点掌握的又有哪些?自学时频繁踩坑,导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙(HarmonyOS NEXT)全栈开发资料用来跟着学习是非常有必要的。
获取完整版高清学习资料,请点击→鸿蒙全栈开发学习资料(安全链接,请放心点击)
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了
最新鸿蒙全栈开发学习线路
鸿蒙HarmonyOS开发教学视频