注册

鸿蒙 Ark ui 视频播放组件 我不允许你不会

前言:


各位同学有段时间没有见面 因为一直很忙所以就没有去更新博客。最近有在学习这个鸿蒙的ark ui开发 因为鸿蒙不是发布了一个鸿蒙next的测试版本 明年会启动纯血鸿蒙应用 所以我就想提前给大家写一些博客文章


概述


在手机、平板或是智慧屏这些终端设备上,媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集,还是视频的播放、切换、循环,亦或是相机的预览、拍照等功能,媒体组件都是必不可少的。以视频功能为例,在应用开发过程中,我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件,我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较为流行的短视频,也包括查看我们存储在本地的视频内容


效果图


image.png


image.png


具体实现:




  • 1 添加网络权限




在module.json5 里面添加网络访问权限


"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]

image.png
如果你是播放本地视频那么可以不添加这个 为了严谨我这边就提一下


我们要播放视频需要用到 video 组件


video 组件里面参数说明


参数名参数类型必填
srcstringResource
currentProgressRatenumberstringPlaybackSpeed8+
previewUristringPixelMap8+Resource
controllerVideoController
其他属性说明 :
.muted(false) //是否静音。默认值:false
.controls(true)//不显示控制栏
.autoPlay(false) // 手动点击播放
.loop(false) // 关闭循环播放
.objectFit(ImageFit.Cover) //设置视频显示模式。默认值:Cover

具体代码


@Entry
@Component
struct Index {


@Styles
customMargin() {
.margin({ left: 20, right: 20 })
}

@State message: string = 'Hello World'
private controller: VideoController = new VideoController();
build() {
Row() {
Column() {
Video({
src: $rawfile('video1.mp4'),
previewUri: $r('app.media.image3'),
controller: this.controller
})
.muted(false) //是否静音。默认值:false
.controls(true)//不显示控制栏
.autoPlay(false) // 手动点击播放
.loop(false) // 关闭循环播放
.objectFit(ImageFit.Cover) //设置视频显示模式。默认值:Cover
.customMargin()// 样式
.height(200) // 高度
}
.width('100%')
}
.height('100%')
}
}

最后总结


鸿蒙的视频播放和安卓还有iOS .里面差不多都有现成的组件使用, 但是底层还是有ffmpeg 的支持。 我们作为上层开发者只需要熟练掌握api使用即可做出来 一个实用的播放器 app, 还有很多细节 由于篇幅有限我就展开讲了 我们下一期再见 最后呢 希望我都文章能帮助到各位同学工作和学习 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 谢谢


作者:坚果派_xq9527
来源:juejin.cn/post/7308620787329105971

0 个评论

要回复文章请先登录注册