鸿蒙视频播放的实现

文章目录

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

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

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

二、播放效果

在这里插入图片描述

三、视频播放的实现
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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/541596.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

elasticsearch篇:DSL查询语法

1.DSL查询文档 众所周知,elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1. DSL查询分类 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来定义查询。常见的查询类型包括: 查询所有:查询出…

Pytest全局变量的使用详解

🍅 视频学习:文末有免费的配套视频可观看 🍅 点击文末小卡片,免费获取软件测试全套资料,资料在手,涨薪更快 这里重新阐述下PageObject设计模式: PageObject设计模式是selenium自动化最成熟&…

Html+threejs数字孪生三维场景实现

程序示例精选 Htmlthreejs数字孪生三维场景实现 如需安装运行环境或远程调试,见文章底部个人QQ名片,由专业技术人员远程协助! 前言 这篇博客针对《Htmlthreejs数字孪生三维场景实现》编写代码,代码整洁,规则&#xf…

练习题手撕总结

基础篇 1.基础知识(时间复杂度、空间复杂度等) 2.线性表(顺序表、单链表) 3.双链表、循环链表 4.队列 5.栈 6.递归算法 7.树、二叉树(递归、非递归遍历) 8.二叉搜索树(BST) 9.二分查…

鸿蒙Next-Grid布局

鸿蒙中的Grid布局类似于前端中的栅格布局 4.0 Grid 文档中心 在Grid组件中只能放GridItem组件 Entry Component struct GridCase {build() {Grid() {GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}}.width…

面试秒过!测试老司机揭秘写好简历的7个细节!

咱们上次说到(详见《一位做过HR的测试老司机带你换工作,简历回复率飙升》)选好了要投的公司,然后就是准备简历的问题了。简历是HR对候选人的第一印象,一个有经验的HR初筛一份2页A4纸的简历通常只有几十秒的时间&#x…

OpenCV(八)——基本线条操作

基本线条操作 OpenCV中提供了基本的线条的操作,包括画直线、画矩形、画圆形等。 (1)画直线,在OpenCV中利用line()画直线,形式为image_with_line cv2.line(image, start_point, end_point, color, thickness)。line(…

CodeTop day2

class Solution {public ListNode reverseKGroup(ListNode head, int k) {ListNode dummy new ListNode(0);//设置虚拟头节点dummy.next head;ListNode pre dummy;//让起始和结束的k个节点从类似虚拟节点的头节点出发ListNode end dummy;while(end.next!null){for (int i0;…

云原生(二)、Docker基础

Docker Docker 是一种开源的容器化平台,用于开发、部署和运行应用程序。它允许开发者将应用程序及其所有依赖项打包到一个可移植的容器中,这个容器可以在任何支持 Docker 的环境中运行,无论是开发人员的个人笔记本电脑、测试环境、生产服务器…

【C++设计模式】UML图的介绍及其画法

文章目录 前言一、UML图的介绍1.1 UML图是什么1.2 UML图的作用 二、UML图的画法2.1 最简单的UML图2.2 继承的UML图2.3 关联关系2.4 聚合关系2.5 组合关系2.6 依赖关系 总结 前言 在软件开发过程中,设计模式是一种被广泛应用的方法,它为解决特定问题提供…

蓝桥杯--冶炼金属

目录 一、题目 二、解决代码 (1)版本一(报错:超时) 代码分析 (2)版本二(不会超时) 代码分析 (3)版本三(最终精简版)…

CMake+vcpkg+VS2022配置github上的cmake开源项目外部库

我们以采用 GitHub 上的开源库 cuda-bundle-adjustment 为例,其不能直接用vcpkg进行安装,只能通过cmake编译后链接到VS2022。 将 cuda-bundle-adjustment 库通过 CMake 编译链接到 Visual Studio 2022 步骤操作: 克隆存储库:使用…