内容简介

本文介绍了如何使用ArkUI框架提供的video组件,实现一个具有简易播放器。通过VideoController控制器来控制倍速、全屏、进度调节等功能。

由于使用本地视频文件会影响App的包大小,所以通常我们的视频文件来源于网络地址,记得需要在config或者module.json对应的"abilities"中添加网络使用权限ohos.permission.INTERNET。

效果展示

添加权限(网络地址需要)

"abilities":[
{
"permissions": ["ohos.permission.INTERNET"],
}
]

  

使用一个VideoController对象可以控制一个或多个video。

//一个VideoController对象可以控制一个或多个video。
controller: VideoController = new VideoController();

  

接口

declare interface VideoOptions {
src?: string | Resource;
currentProgressRate?: number | string | PlaybackSpeed;
previewUri?: string | PixelMap | Resource;
controller?: VideoController;
}

  

其中仅src(视频播放源的路径)这个参数是必填的。

★支持本地视频路径和网络路径。

★支持在resources下面的video或rawfile文件夹里放置媒体资源。

★支持dataability://的路径前缀,用于访问通过Data Ability提供的视频路径

currentProgressRate:number视频播放倍速,支持0.75、1.0、1.25、1.75、2.0。

previewUri:string预览图片的路径,可以作为视频未播放时的封面。

controller:VideoController控制器。一个VideoController对象可以控制一个或多个video。如果需要通过代码控制视频的播放、暂停等,可以给Video组件设置这个参数,然后通过控制器的如下接口控制视频播放状态:

PlaybackSpeed类型接口说明

declare interface VideoOptions {
src?: string | Resource;
currentProgressRate?: number | string | PlaybackSpeed;
previewUri?: string | PixelMap | Resource;
controller?: VideoController;
}

  


VideoController

一个VideoController对象可以控制一个或多个video。

★start() : void开始播放。

★pause() : void暂停播放。

★stop() : void停止播放。

★setCurrentTime(value: number, seekMode: SeekMode)指定视频播放的进度位置,并指定跳转模式。value是进度,seekMode是跳转模式

★requestFullscreen() : boolean()请求全屏播放,true是横屏,false竖屏。

★exitFullscreen() : void退出全屏。

在这儿,我同样需要将setCurrentTime单独拎出

setCurrentTime8+

setCurrentTime(value: number, seekMode: SeekMode)

指定视频播放的进度位置,并指定跳转模式。

★参数

★SeekMode8+类型接口说明


declare interface VideoOptions {
src?: string | Resource;
currentProgressRate?: number | string | PlaybackSpeed;
previewUri?: string | PixelMap | Resource;
controller?: VideoController;
}

  

Video属性

muted(是否静音)、autoPlay(自动播放)、controls(控制栏)、objectFit(显示模式)、loop(是否循环播放)。其中,objectFit参数设置值为ImageFit.Cover则铺满整个容器。

详细介绍

.muted(boolean) 默认值false是否静音。

.autoPlay(boolean) 默认值false是否自动播放。

.controls(boolean) 默认值true控制视频播放的控制栏是否显示。

.loop(boolean) 是否单个视频循环播放。

.objectFit(ImageFit) 默认值Cover设置视频显示模式。ImageFit有如下枚举值可选

ImageFit枚举说明

事件:

onStart() => void播放时触发该事件。

onPause() => void暂停时触发该事件。

onFinish() => void播放结束时触发该事件。

onError() => void播放失败时触发该事件。

onFullscreenChange(event?: { fullscreen: boolean }) => void) 视频进入和退出全屏时触发该事件。

onPrepared(event?: { duration: number }) => void视频准备完成时触发该事件,通过duration可以获取视频时长,单位为秒(s)。

onSeeking(event?: { time: number }) => void操作进度条过程时上报时间信息,单位为s。

onSeeked(event?: { time: number }) => void操作进度条完成后,上报播放时间信息,单位为s。

onUpdate(event?: { time: number }) => void播放进度变化时触发该事件,单位为s,更新时间间隔为250ms。

完整示例

@Entry
@Component
struct Index {
@State message: string = '视频预览'
@State previewUris: Resource = $r('app.media.openharmony'); //预览封面
controller: VideoController = new VideoController();
@State currentProgressRate: number = 1
@State muted: boolean = false
@State autoPlay: boolean = true
@State controls: boolean = true
@State startStatus: boolean = true
@State loop: boolean = true aboutToAppear() {
this.controller.requestFullscreen(true)
this.controller.start()
} build() { Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Video({
src: $r('app.media.video'),
previewUri: this.previewUris, // 视频封面
currentProgressRate: this.currentProgressRate, // 视频播放倍速
controller: this.controller, })
.muted(this.muted) // 是否静音
.autoPlay(this.autoPlay) // 是否自动播放
.controls(this.controls) // 控制视频播放的控制栏是否显示
.objectFit(ImageFit.Contain) // 视频显示模式
.loop(this.loop) // 是否单个视频循环播放
.height("60%")
.onStart(() => {
// 播放时触发该事件
console.info('onStart');
})
.onPause(() => {
// 暂停时触发该事件
console.info('onPause');
})
.onFinish(() => {
console.info('onFinish'); })
.onError(() => {
// 播放失败时触发该事件
console.error('onError');
})
.onFullscreenChange((e) => {
console.info('视频进入和退出全屏时触发该事件:' + e.fullscreen)
})
.onPrepared((e) => {
console.info('视频准备完成时触发该事件:' + e.duration)
})
.onSeeking((e) => {
console.info('操作进度条过程时上报时间信息:' + e.time)
})
.onSeeked((e)=>{
console.info('操作进度条完成后,上报播放时间信息:'+ e.time)
})
.onUpdate((e)=>{
console.info('播放进度变化时触发该事件:'+ e.time)
})
Row({}){
Flex({ wrap:FlexWrap.Wrap, justifyContent:FlexAlign.SpaceAround, alignItems:ItemAlign.Center}){
Button("播放")
.onClick(()=>{
this.controller.start()
}).margin(8)
Button("暂停")
.onClick(()=>{
this.controller.pause()
})
Button("循环播放")
.onClick(()=>{
this.loop=!this.loop
})
Button("2倍速")
.onClick(()=>{
this.currentProgressRate=2
})
Button("静音")
.onClick(()=>{
this.muted=!this.muted
}) Button("停止")
.onClick(()=>{
this.controller.stop()
}) Button("全屏播放")
.onClick(()=>{
this.controller.requestFullscreen(true)
})
Button("退出全屏")
.onClick(()=>{
this.controller.exitFullscreen()
}).margin(8) Button("控制栏是否显示")
.onClick(()=>{
this.controls =!this.controls
}).margin(8) Button("指定视频播放的进度")
.onClick(()=>{
this.controller.setCurrentTime(9)
})
}
}
}
.width('100%').height('100%')
}
}

  

总结

本文介绍了如何使用ArkUI框架提供的video组件,实现一个具有视频播放、倍速控制、进度调节的播放器。通过VideoController控制器来控制倍速、全屏、进度调节等功能。当然,除了文中分享的视频播放器样例,开发者还可以通过拓展其他相关属性和方法,实现更多好玩的样例。

在DAYU200上实现OpenHarmony视频播放器的更多相关文章

  1. 【Mac上的PotPlayer视频播放器】Movist Pro for Mac 2.1.2

    [简介] Movist 是Mac上最好用的视频播放器之一,功能齐全,类似Windows上的PotPlayer,今天和大家分享最新的 2.1.2 中文版本,Movist 支持几乎所有常见的视频格式,包括 ...

  2. Android 视频播放器切换到下个视频时残留上个视频画面的解决办法

    最近在做一个Android视频播放器,遇到一个问题:切换到下一个视频时,中间会停留上一个视频的残存画面.   这是怎么回事?   我在网上找了很多资料,终于找到了原因:我是用自定义一个surfacev ...

  3. WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现

    原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系统,5 ...

  4. android开发里跳过的坑——调用已安装视频播放器在有些机器上无效

    调用已安装视频播放器播放未修改之前的代码 private void startPlay(String fileName){ File file = new File(fileName); Intent ...

  5. 在Ubuntu18.04.2LTS上安装视频播放器smplayer/vlc

    在Ubuntu18.04.2LTS上安装视频播放器smplayer/vlc 一.前言 在Ubuntu上的视频播放器质量很差,没有解码器,非常的不方便,于是我们需要手动去安装适合我们的播放器,比如smp ...

  6. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  7. 建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器

    故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了. ...

  8. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  9. 一款开源免费跨浏览器的视频播放器--videojs使用介绍

    最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上翻了个遍,试来试去,在所有的视频播放器中,就数它最实际了.首先我们来看看它的优点: 1.它是开源免 ...

  10. 分享一个基于HTML5实现的视频播放器

    什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...

随机推荐

  1. gorm入门学习

    文档 https://learnku.com/docs/gorm/v2/v2_release_note/9756 https://gorm.cn/zh_CN/docs/ 下载安装 go get -u ...

  2. tox包

    官方文档 https://tox.readthedocs.io/en/latest/example/basic.html 官方提供的一个简单的tox.ini/默认环境 [tox] envlist = ...

  3. git commit 不生成 changeId 解决方案

    1). 检查仓储 .git/hook 下面是否有 commit-msg 文件,如果没有可以到下面的地址下载,或者把其他同事的 commit-msg 文件拷贝到你的 .git/hook 重新commit ...

  4. MySQL 数据库死锁排查

    死锁排查方法 查看进程状态 show processlist; 查看行锁的状态 show status like 'InnoDB_row_lock%'; 查询是否有死锁 show engine inn ...

  5. 【Azure Redis 缓存】Redis性能指标之Server Load

    Server Load描述 在Redis的官方介绍中,Server Load指标是Redis 服务器忙于处理消息并且非空闲等待消息的周期百分比. 如果此计数器达到 100,则意味着 Redis 服务器 ...

  6. ExoPlayer播放流程解析

    ExoPlayer的播放解析流程如下(以音频为例): 注意: 1.LoadControl.shouldContinueLoading控制是否继续加载. 2.调用setPlayWhenReady(tru ...

  7. SSK:超级键盘模拟器,调用底层,可模拟所有按键

    SSK - 吵架键盘模拟器 SuperSimulator of Keyboard 调用系统底层,能够模拟所有键盘操作! 本程序结合快Key(QuicKeys智能登录助手)一起使用,能够创造更多奇迹! ...

  8. 调试分析 Linux 0.00 多任务切换

    当执行完 system_interrupt 函数,执行 153 行 iret 时,记录栈的变化情况. 任务0在刚进入system_interrupt函数时(调用中断int 0x80处理程序),栈空间为 ...

  9. C# 常用特性(Attribute)

    目录 指定方法实现的属性MethodImplAttribute 标记不再使用的程序元素ObsoleteAttribute 指定属性或事件的说明DescriptionAttribute 未完待续... ...

  10. Linux快速入门(四)Linux用户管理

    root用户和普通用户 虽然root用户的的权限很大,但一般情况下,我们都不会直接使用root用户而是创建一个普通用户,这样可以避免因为权限过大带来的一些误操作,当使用一些需要权限的操作时,可以使用s ...