鸿蒙视频播放的实现

文章目录

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

一、前言

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

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

二、播放效果

三、视频播放的实现

1、准备.mp4 资源

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

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

  @State videoSrc: Resource = $rawfile('1.mp4')
1

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()
1
2
3
4
5

使用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)
	        })
 	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

点击播放

  Button('开始播放').onClick(()=>{
            this.controller.start()//这里是开始播放
          })
1
2
3

暂停播放

   Button('暂停播放').onClick(()=>{
            this.controller.pause() //这里是暂停播放
          }).margin(5)
1
2
3

定位到某个播放位置

  Button('跳到10s位置').onClick(()=>{
           this.controller.setCurrentTime(10, SeekMode.Accurate) //定位到某个位置
         })
1
2
3

切换视频

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

控制是否显示视频控制栏

  Button('是否显示视频控制栏').onClick(()=>{
            this.showControls = !this.showControls //切换是否显示视频控制栏
          })
1
2
3

切换预览封面

Button('切换预览封面').onClick(()=>{
            this.previewUri = $r('app.media.phone')  //切换预览的封面
          })
1
2
3

设置播放速度

  Button('0.75倍数').onClick(()=>{
            this.curRate = PlaybackSpeed.Speed_Forward_0_75_X;
          })
1
2
3

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

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

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

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

以上代码地址：https://github.com/shenshizhong/ViewUseDemo

总结

1、视频资源存放位置
2、找到资源进行播放
3、实现播放形式切换

如果对你有一点点帮助，那是值得高兴的事情。：)
我的csdn：http://blog.csdn.net/shenshizhong
我的简书：http://www.jianshu.com/u/345daf0211ad