本篇内容 对video和XComponent的学习使用
一、知识储备
1. video(播放视频的组件)
Video({
src: this.innerResource,
previewUri: this.previewUris,
controller: this.controller
})
- 使用
@Component
struct rawVideo {//应用资源文件
private controller: VideoController;
build() {
Column() {
Video({
src: $rawfile('test.mp4'),
previewUri: $r('app.media.icon'),
controller: this.controller
})
}
}
}
@Component
struct sdCardVideo { //sd卡
private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4';
private controller: VideoController;
build() {
Column() {
Video({
src: this.videoSrc,
controller: this.controller
})
}
}
}
private controller: VideoController;
private videoUrl: string = 'https://zy.yunqishi8.com/upload/mp4/201808/16-29.mp4';
build() {
Column() {
Video({
src: this.videoUrl,
previewUri: $r('app.media.icon'),
controller: this.controller
})
}
}
- 常用属性
.muted(false)//设置是否静音
.controls(false)//是否显示默认控制条
.autoPlay(false)//是否自动播放
.loop(false)//是否循环播放
.objectFit(ImageFit.Contain)//视频适配模式
.onUpdate((event) => { //更新事件回调
})
.onPrepared((event) => { //准备完成事件回调
})
.onError(() => { //失败事件回调
})
2. XComponent(自定义绘制组件)
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2867673643e840178d58a152dd3fc61e.gif#pic_center)
三、源码剖析
@Component
@Entry
struct VideoPage {
private controller: VideoController = new VideoController();
private videoUrl: Resource = $rawfile('test.mp4');
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X; //播放倍速
@State isAutoPlay: boolean = false; //是否自动播放
@State showController: boolean = false; //是否显示控制条
@State sliderStartTime: string = '';
@State currentTime: number = 0;
@State durationTime: number = 0;
@State durationStringTime: string = '';
build() {
Column() {
Video({
src: this.videoUrl,
previewUri: $r('app.media.icon'),
controller: this.controller,
currentProgressRate: this.curRate
})
.muted(false) //设置是否静音
.controls(false) //是否显示默认控制条
.autoPlay(true) //是否自动播放
.loop(false) //是否循环播放
// .objectFit(ImageFit.Contain) //视频适配模式
.onUpdate((event) => { //更新事件回调
console.error(`更新: ${event}`)
this.currentTime = event.time
})
.onPrepared((event) => { //准备完成事件回调
console.error(`准备: ${event}`)
this.durationTime = event.duration
})
.onError(() => { //失败事件回调
console.error(`error`)
})
Row() {
Text(JSON.stringify(this.currentTime) + 's');
Slider({
value: this.currentTime,
min: 0,
max: this.durationTime
})
.onChange((val, model) => {
this.controller.setCurrentTime(val)
console.error(`onChange: ${model}`)
}).width('90%')
Text(JSON.stringify(this.durationTime) + 's')
}.opacity(0.8)
.width('100%')
}.width('100%')
.height('40%')
}
}
@Component
struct urlVideo { //网络资源文件
private controller: VideoController;
private videoUrl: string = 'https://zy.xxxx.com/upload/mp4/201808/16-29.mp4';
build() {
Column() {
Video({
src: this.videoUrl,
previewUri: $r('app.media.icon'),
controller: this.controller
})
}
}
}
@Component
struct rawVideo { //应用资源文件
private controller: VideoController;
build() {
Column() {
Video({
src: $rawfile('test.mp4'),
previewUri: $r('app.media.icon'),
controller: this.controller
})
}
}
}
@Component
struct sdCardVideo { //sd卡
private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4';
private controller: VideoController;
build() {
Column() {
Video({
src: this.videoSrc,
controller: this.controller
})
}
}
}