鸿蒙视频播放的实现

文章目录

  • 前言
  • 播放效果
  • 视频播放的实现
  • 总结

一、前言

现在市面上很多应用都跟视频有关,那么在鸿蒙系统上怎么来播放视频呢,今天就讲解视频播放控件,让你也能快速地进行视频播放功能开发。

最后呢,我会提供一个鸿蒙中涉及的主要组件的使用,这个库不断在更新,对学习组件是很有帮助的,你只要运行就能看到效果,如果你项目中要用,直接复制粘贴,非常方便。

二、播放效果

三、视频播放的实现

1、准备.mp4 资源

找到一个mp4的资源,把它放到目录下的entry/src/main/resource/rawfile

我们想要播放视频,那么肯定要找到这个地址,那么在项目中怎么找到这个资源呢,代码如下

cpp 复制代码
  @State videoSrc: Resource = $rawfile('1.mp4')
2、使用控件播放

声明以下这几个变量

cpp 复制代码
  @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 组件

cpp 复制代码
      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)
	        })
 	}

点击播放

cpp 复制代码
  Button('开始播放').onClick(()=>{
            this.controller.start()//这里是开始播放
          })

暂停播放

cpp 复制代码
   Button('暂停播放').onClick(()=>{
            this.controller.pause() //这里是暂停播放
          }).margin(5)

定位到某个播放位置

cpp 复制代码
  Button('跳到10s位置').onClick(()=>{
           this.controller.setCurrentTime(10, SeekMode.Accurate) //定位到某个位置
         })

切换视频

cpp 复制代码
  Button('切换视频').onClick(()=>{
            this.videoSrc = $rawfile('2.mp4') //切换到2这个视频进行播放
          })

控制是否显示视频控制栏

cpp 复制代码
  Button('是否显示视频控制栏').onClick(()=>{
            this.showControls = !this.showControls //切换是否显示视频控制栏
          })

切换预览封面

cpp 复制代码
Button('切换预览封面').onClick(()=>{
            this.previewUri = $r('app.media.phone')  //切换预览的封面
          })

设置播放速度

cpp 复制代码
  Button('0.75倍数').onClick(()=>{
            this.curRate = PlaybackSpeed.Speed_Forward_0_75_X;
          })

学习不贪多,一点点来,上面就是视频播放主要的东西,跟着自己撸一遍就很清晰了。

最后呢,将我整理的这些组件都放到这个项目中,后面有新增,也会一并上传。开发中,某些api忘记了,可以重新拿出来看看。

最后献上我的个人v,专属终身顾问,解答关于鸿蒙相关的东西,包括项目中的问题,还有最新的技术点,快速开发,抢在前头。hmssz1

技术迭代很快,不要在一个问题上拔不出来,找到专业的人,快速的解决,作为程序员时间是最宝贵的,不要自己蒙头苦干,等你搞懂了,这个技术已经过时了。

以上代码地址:github.com/shenshizhon...

总结

1、视频资源存放位置

2、找到资源进行播放

3、实现播放形式切换

如果对你有一点点帮助,那是值得高兴的事情。:)

我的csdn:blog.csdn.net/shenshizhon...

我的简书:www.jianshu.com/u/345daf021...

相关推荐
zhanshuo11 小时前
在鸿蒙里优雅地处理网络错误:从 Demo 到实战案例
harmonyos
zhanshuo11 小时前
在鸿蒙中实现深色/浅色模式切换:从原理到可运行 Demo
harmonyos
whysqwhw16 小时前
鸿蒙分布式投屏
harmonyos
whysqwhw17 小时前
鸿蒙AVSession Kit
harmonyos
whysqwhw19 小时前
鸿蒙各种生命周期
harmonyos
whysqwhw20 小时前
鸿蒙音频编码
harmonyos
whysqwhw20 小时前
鸿蒙音频解码
harmonyos
whysqwhw20 小时前
鸿蒙视频解码
harmonyos
whysqwhw20 小时前
鸿蒙视频编码
harmonyos
ajassi200020 小时前
开源 Arkts 鸿蒙应用 开发(十八)通讯--Ble低功耗蓝牙服务器
华为·开源·harmonyos