当前位置: 首页 > news >正文

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

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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

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

http://www.lryc.cn/news/307503.html

相关文章:

  • React引入css的几种方式以及应用
  • [算法沉淀记录] 排序算法 —— 冒泡排序
  • 【机器人最短路径规划问题(栅格地图)】基于遗传算法求解
  • 如何做代币分析:以 TRX 币为例
  • 关于地址引用与值引用的坑
  • 初谈软件工程(一)
  • 自动化开展思路
  • 安装使用zookeeper
  • nginx实现http反向代理及负载均衡
  • vue组件中data为什么必须是一个函数
  • 科技论文编写思路
  • Windows虚拟机克隆后修改SID
  • 前端架构: 脚手架工具rxjs的快速上手应用
  • 小程序框架(概念、工作原理、发展及应用)
  • 音视频数字化(数字与模拟-电影)
  • 在 Ubuntu 中, 使用 fsck 命令来修复磁盘文件系统
  • LED电子显示屏连接方式解析
  • Mysql运维篇(五) 部署MHA--主机环境配置
  • Offer必备算法09_分治快排_四道力扣OJ(快排三路划分)
  • Linux下性能分析的可视化图表工具
  • 泽攸科技JS系列高精度台阶仪在半导体领域的应用
  • c++实现栈和队列类
  • MySQL优化之索引下推
  • 【Java程序设计】【C00338】基于Springboot的银行客户管理系统(有论文)
  • C语言中大小写字母的转化
  • Camunda7.18流程引擎启动出现Table ‘camunda_platform_docker.ACT_GE_PROPERTY‘的解决方案
  • 红队打靶:DR4G0N B4LL打靶思路详解(vulnhub)
  • SQL Server添加用户登录
  • pytest如何在类的方法之间共享变量?
  • 配置前端项目到 github-pages