文章目录
- 前言
- 播放效果
- 视频播放的实现
- 总结
一、前言
现在市面上很多应用都跟视频有关,那么在鸿蒙系统上怎么来播放视频呢,今天就讲解视频播放控件,让你也能快速地进行视频播放功能开发。
最后呢,我会提供一个鸿蒙中涉及的主要组件的使用,这个库不断在更新,对学习组件是很有帮助的,你只要运行就能看到效果,如果你项目中要用,直接复制粘贴,非常方便。
二、播放效果
三、视频播放的实现
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