鸿蒙HarmonyOS实战-ArkUI组件（Video）_harmonyos video组件

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

#### 🦋2.3 加载网络视频


需要申请权限ohos.permission.INTERNET

@Component
@Entry
export struct VideoPlayer{
private controller:VideoController;
private videosrc: string= ‘https://video-js.51miz.com/preview/video/00/00/17/91/V-179173-F2183031.mp4’ // 使用时请替换为实际视频加载网址
build(){
Column() {
Video({
src: this.videosrc,
controller: this.controller
})
}
}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/398c2820d1e04293a0582b865b9e46cd.png)


### 3.添加属性


Video组件属性主要用于设置视频的播放形式。例如设置视频播放是否静音、播放时是否显示控制条等。

@Component
@Entry
export struct VideoPlayer{
private controller:VideoController;
private innerResource: Resource = $rawfile(‘1.mp4’);
build() {
Column() {
Video({
src: this.innerResource,
controller: this.controller
}) .muted(true) //设置是否静音
.controls(true) //设置是否显示默认控制条
.autoPlay(true) //设置是否自动播放
.loop(true) //设置是否循环播放
.objectFit(ImageFit.Auto) //设置视频适配模式
}
}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/88ed6cfa0530465d83d81f3f22942e07.png)


### 4.事件调用


Video组件回调事件主要为播放开始、暂停结束、播放失败、视频准备和操作进度条等事件，除此之外，Video组件也支持通用事件的调用，如点击、触摸等事件的调用。

@Component
@Entry
export struct VideoPlayer{
private controller:VideoController;
private innerResource: Resource = $rawfile(‘1.mp4’);
build() {
Column() {
Video({
src: this.innerResource,
controller: this.controller
}) .onUpdate((event) => { //更新事件回调
console.info(“Video update.”);
})
.onPrepared((event) => { //准备事件回调
console.info(“Video prepared.”);
})
.onError(() => { //失败事件回调
console.info(“Video error.”);
})
}
}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/e64bd5eb0c7a4914a94dff127798d358.png)


### 5.Video控制器使用


#### 🦋5.1 默认视频控制器


默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。

@Component
@Entry
export struct VideoPlayer{
private videoSrc: Resource = $rawfile(‘1.mp4’);
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
build() {
Row() {
Column() {
Video({
src: this.videoSrc,
currentProgressRate: this.curRate
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/32446acae5a547498cd7ef6745fffda2.png)


#### 🦋5.2 自定义视频控制器


使用自定义的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。

@Component
@Entry
export struct VideoPlayer{
private videoSrc: Resource = $rawfile(‘1.mp4’);
@State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
@State isAutoPlay: boolean = false
@State showControls: boolean = true
@State sliderStartTime: string = ‘’;
@State currentTime: number = 0;
@State durationTime: number = 0;
@State durationStringTime: string =‘’;
controller: VideoController = new VideoController()

build() {
Row() {
Column() {
Video({
src: this.videoSrc,
currentProgressRate: this.curRate,
controller: this.controller
}).controls(false).autoPlay(true)
.onPrepared((event)=>{
this.durationTime = event.duration
})
.onUpdate((event)=>{
this.currentTime =event.time
})
Row() {
Text(JSON.stringify(this.currentTime) + ‘s’)
Slider({
value: this.currentTime,
min: 0,
max: this.durationTime
})
.onChange((value: number, mode: SliderChangeMode) => {
this.controller.setCurrentTime(value);
}).width(“90%”)
Text(JSON.stringify(this.durationTime) + ‘s’)
}
.opacity(0.8)
.width(“100%”)
}
.width(‘100%’)
}
.height(‘40%’)
}
}

![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c5980cf453a9a43ee8f5a4eb12b7e60f.png)


###  🚀写在最后


* 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
%")
      }
      .width('100%')
    }
    .height('40%')
  }
}

🚀写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：