文章目录
- 前言
- 播放效果
- 视频播放的实现
- 总结
一、前言
现在市面上很多应用都跟视频有关，那么在鸿蒙系统上怎么来播放视频呢，今天就讲解视频播放控件，让你也能快速地进行视频播放功能开发。
最后呢，我会提供一个鸿蒙中涉及的主要组件的使用，这个库不断在更新，对学习组件是很有帮助的，你只要运行就能看到效果，如果你项目中要用，直接复制粘贴，非常方便。
二、播放效果
video.png
三、视频播放的实现
1、准备.mp4 资源
找到一个mp4的资源，把它放到目录下的entry/src/main/resource/rawfile
我们想要播放视频，那么肯定要找到这个地址，那么在项目中怎么找到这个资源呢，代码如下
@State videoSrc: Resource = $rawfile('1.mp4')
2、使用控件播放
声明以下这几个变量
@State previewUri: Resource = $r('app.media.app_icon') //预览封面
@State curRate : PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X //1倍数播放
@State isAutoPlay: boolean = false //是否自动播放
@State showControls: boolean = true //是否显示视频控制栏
controller: VideoController = new VideoController()
使用Video 组件
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.log('onStart')
})
.onPause(()=>{
console.log('onPause')
})
.onFinish(()=>{
console.log('onFinish')
})
.onError(()=>{
console.log('onError')
})
.onPrepared((e?: DurationObject)=>{ //获取总的播放时长
if (e != undefined) {
console.log('onPrepared is' + e.duration)
}
})
.onSeeking((e?: TimeObject) => { //拖拽到哪里的监听，比如6，7，8，9秒的为位置
console.log('onSeeking is ' + e.time)
})
}
点击播放
Button('开始播放').onClick(()=>{
this.controller.start()//这里是开始播放
})
暂停播放
Button('暂停播放').onClick(()=>{
this.controller.pause() //这里是暂停播放
}).margin(5)
定位到某个播放位置
Button('跳到10s位置').onClick(()=>{
this.controller.setCurrentTime(10, SeekMode.Accurate) //定位到某个位置
})
切换视频
Button('切换视频').onClick(()=>{
this.videoSrc = $rawfile('2.mp4') //切换到2这个视频进行播放
})
控制是否显示视频控制栏
Button('是否显示视频控制栏').onClick(()=>{
this.showControls = !this.showControls //切换是否显示视频控制栏
})
切换预览封面
Button('切换预览封面').onClick(()=>{
this.previewUri = $r('app.media.phone') //切换预览的封面
})
设置播放速度
Button('0.75倍数').onClick(()=>{
this.curRate = PlaybackSpeed.Speed_Forward_0_75_X;
})
学习不贪多，一点点来，上面就是视频播放主要的东西，跟着自己撸一遍就很清晰了。
最后呢，将我整理的这些组件都放到这个项目中，后面有新增，也会一并上传。开发中，某些api忘记了，可以重新拿出来看看。
最后献上我的个人v，专属终身顾问，解答关于鸿蒙相关的东西，包括项目中的问题，还有最新的技术点，快速开发，抢在前头。hmssz1
技术迭代很快，不要在一个问题上拔不出来，找到专业的人，快速的解决，作为程序员时间是最宝贵的，不要自己蒙头苦干，等你搞懂了，这个技术已经过时了。
以上代码地址：https://github.com/shenshizhong/ViewUseDemo
总结
1、视频资源存放位置
2、找到资源进行播放
3、实现播放形式切换
如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的简书：http://www.jianshu.com/u/345daf0211ad
