【HarmonyOS】鸿蒙开发之Video组件——第3.7章

news/2024/4/17 7:20:04

Video组件内VideoOptions属性简介

  • src:设置视频地址。
  • currentProgressRate:设置视频播放倍速,参数说明如下:
    • number|string:只支持 0.75 , 1.0 , 1.25 , 1.75 , 2.0 。
    • PlaybackSpeed:对 number | string 的封装,防止用户传错参数的。
  • previewUri:视频封面图的路径。
  • controller:设置视频播放的控制器,比如控制视频开始,暂停等。

代码实例:

// Web控制器private videoController: VideoController = new VideoController()build(){Column(){Video({src: $r("app.media.test"),             // 设置数据源previewUri: "https://tenfei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg",     // 设置封面图片controller: this.videoController      // 设置控制器}).width(300).height(210)Row({space: 10}) {Button("播放").onClick(() => {this.videoController.start()})Button("暂停").onClick(() => {this.videoController.pause()})Button("继续").onClick(() => {this.videoController.start()})}.margin({bottom:10,top:10})Row() {Button("全屏").onClick(() => {this.videoController.requestFullscreen(true)})Button("退出全屏").onClick(() => {this.videoController.exitFullscreen()})}}.justifyContent(FlexAlign.Center).width("100%").height("100%")}

Video组件事件介绍

//播放视频
onStart(event: () => void): VideoAttribute;
//暂停视频
onPause(event: () => void): VideoAttribute;
//视频完成时触发
onFinish(event: () => void): VideoAttribute;
//在全屏播放与非全屏播放状态之间切换时触发该事件
onFullscreenChange(callback: (event?: { fullscreen: boolean }) => void): VideoAttribute;
//视频准备完成时触发该事件,通过duration可以获取视频时长,单位为s
onPrepared(callback: (event?: { duration: number }) => void): VideoAttribute;
//当用户开始移动/跳到音频/视频中的新位置时
onSeeking(callback: (event?: { time: number }) => void): VideoAttribute;
//当用户重新定位视频的播放位置后执行
onSeeked(callback: (event?: { time: number }) => void): VideoAttribute;
//播放进度变化时触发该事件,单位为s,更新时间间隔为250ms
onUpdate(callback: (event?: { time: number }) => void): VideoAttribute;
//播放失败时触发该事件
onError(event: () => void): VideoAttribute;

代码实例

 Video({...}).onUpdate((event) => {this.currentTime = event.time;this.currentStringTime = this.handleChangeSliderTime(this.currentTime); //更新事件}).onPrepared((event) => {console.log("视频时长:"+event.duration);}).onError(() => {promptAction.showToast({duration: 2000, //播放失败事件message: "播放失败"});}).width(300).height(210)

注意:如果视频播放路径为第三方链接,需要开启网络权限。如图:
在这里插入图片描述

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教


https://www.xjx100.cn/news/3293526.html

相关文章

校门外的树

目录 题目描述 输入格式 输出格式 输入输出样例 说明/提示 解 题目描述 某校大门外长度为 l 的马路上有一排树,每两棵相邻的树之间的间隔都是 1 米。我们可以把马路看成一个数轴,马路的一端在数轴 0 的位置,另一端在 l 的位置&#xff…

ThreeJS 几何体顶点position、法向量normal及uv坐标

文章目录 几何体的顶点position、法向量normal及uv坐标UV映射UV坐标系UV坐标与顶点坐标设置UV坐标案例1:使用PlaneGeometry创建平面缓存几何体案例2:使用BufferGeometry创建平面缓存几何体 法向量 - 顶点法向量光照计算案例1:不设置顶点法向量…

Unity中URP实现水体(水的焦散)

文章目录 前言一、原理1、 通过深度图,得到 对应像素 在 世界空间下的Z值2、得到模型顶点在 观察空间 下的坐标3、由以上两点得到 深度图像素 对应的 xyz 值4、最后,转化到 模型本地空间下,用其对焦散纹理采样 二、实现1、获取深度图2、在顶点…

神经网络系列---卷积

文章目录 卷积神经网络卷积转置卷积 卷积核和反卷积的三种实现方式卷积的次数计算 卷积神经网络 在神经网络的卷积层中,向下取整(Floor)是一种常用的策略,特别是在处理输出尺寸不是整数的情况时。当你计算出卷积层输出的尺寸&…

网安入门16-XSS(三种类型)

什么是XSS漏洞——来自Google Gemini XSS漏洞,全称跨站脚本攻击(Cross-Site Scripting),是代码注入的一种。它允许恶意用户将代码注入到网页上,原理是攻击者将恶意代码注入到可信网站的页面中,当用户浏览该…

使用sunshine和moonlight实现远程游戏串流

过年回家想要打游戏,但是苦于家里没有电脑,又没办法把电脑搬回去,于是想到了使用串流的方式。 实现串流的软件有多种: moonlight。因为仅实现了 NVIDIA 的游戏串流协议,所以只支持 N 卡。Steam Link。支持 steam 的游…

Hive的Rank排名(rank函数,dense_rank函数,row_numer函数)

一、区别: 三者通常都会配合窗口函数over(),并结合partition by order by xxx来分组排序,即形式使用:function_name over(partition by xxx order by xxx)。首先三者都是产生一个自增序列,不同的是 row_number() 排序…

许战海矩阵|佐香园:“熟酱”的爆品战略

佐香园是辽宁帝华味精食品有限公司的主导品牌,是一个拥有自主研发与生产经营能力的民营企业,主要生产和销售香料、调味料以及食品添加剂等产品。该品牌自创办以来,一直坚持以市场为导向,走专业化发展之路,打造全方位的…