1. 视频播放
1.1 视频播放基本介绍
Video 组件用于播放视频文件并控制其播放状态，常用于为短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置
Video 提供构造参数 Video(value: VideoOptions)
VideoOptions 对象包含参数 src、currentProgressRate、previewUri、controller。其中，src 指定视频播放源的路径，currentProgressRate 用于设置视频播放倍速，previewUri 指定视频未播放时的预览图片路径，controller 设置视频控制器，用于自定义控制视频。
Video 组件支持加载本地视频和网络视频。
1.2 加载本地视频
加载本地视频时，首先在本地 rawfile 目录指定对应的文件
编辑
再使用资源访问符 $rawfile()引用视频资源。
@Entry @Component struct VideoCase {
build() { Column() { Video({ src: $rawfile('04功能体检基础质量测试.mp4') }).width('100%') .height('50%') } .height('100%') .width('100%') } }
复制代码
编辑
1.3 加载网络视频
加载网络视频时，需要申请权限 ohos.permission.INTERNET
注意：网络视频地址是下载地址
@Entry @Component struct VideoCase {
build() { Column() { Video({ src: 'http://121.41.123.231:8888/f/df2d26723a7f4245ae57/?dl=1' }).width('100%') .height('50%') } .height('100%') .width('100%') } }
复制代码
1.4 常用属性
@Entry @Component struct VideoCase {
build() { Column() { Video({ src: $rawfile('04功能体检基础质量测试.mp4') }).width('100%') .height('50%') .muted(false) //设置是否静音 .controls(false) //设置是否显示默认控制条 .autoPlay(false) //设置是否自动播放 .loop(false) //设置是否循环播放 .objectFit(ImageFit.Contain) //设置视频适配模式 } .height('100%') .width('100%') } }
复制代码
1.5 事件调用
@Entry @Component struct VideoCase {
build() { Column() { Video({ src: $rawfile('04功能体检基础质量测试.mp4') }).width('100%') .height('50%') .onUpdate((event) => { //更新事件回调 console.info("Video update."); }) .onPrepared((event) => { //准备事件回调 console.info("Video prepared."); }) .onError(() => { //失败事件回调 console.info("Video error."); }) .onStop(() => { //停止事件回调 console.info("Video stoped."); }) } .height('100%') .width('100%') } }
复制代码
1.6 完整案例
@Entry @Component struct VideoCase { @State speed: number = 1 controller: VideoController = new VideoController() build() { Row() { Tabs() { TabContent() { Column({ space: 20 }) { Video({ controller: this.controller, currentProgressRate: this.speed, src: 'http://121.41.123.231:8888/f/df2d26723a7f4245ae57/?dl=1' }) .width('100%') .aspectRatio(1.4) Slider({ value: this.speed, min: 0.75, step: 0.25, max: 2, style: SliderStyle.InSet }) .showSteps(true) .onChange(value => { this.speed = value }) Text(this.speed+"倍速").fontSize(14).textAlign(TextAlign.Center).width('100%') Row({ space: 20 }) { Button("播放") .onClick(() => { this.controller.start() }) Button("暂停") .onClick(() => { this.controller.pause() }) Button("移动进度") .onClick(() => { this.controller.setCurrentTime(30) // 单位为秒 }) Button("结束") .onClick(() => { this.controller.stop() }) } } .width('100%') }.tabBar("在线视频") TabContent() { Video({ src: $rawfile('04功能体检基础质量测试.mp4') }) .width('100%') .aspectRatio(1.4) } .tabBar("本地视频") } .animationDuration(300)
} .height('100%') } }
复制代码
2. 绘图能力
2.1 基本介绍
鸿蒙提供画布组件，用于自定义绘制图形，叫 Canvas。
ArkUI 里面的画布和前端的 Canvas 的用法基本一致
使用方法
\1. 放置 Canvas 组件-给宽和高
\2. 初始化画笔对象 CanvasRenderingContext2D，将画笔对象作为构造参数传递给 Canvas 组件
\3. 可以在 Canvas 的 onReady 事件中进行动态绘制
\4. 绘制方法参考下面官方文档
官方文档地址：
文档中心
2.2 接口方法
Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext)
2.3 开发步骤
2.3.1 定义一个画布
// 1、定义一个画布Canvas().width('300').aspectRatio(1).backgroundColor('#ccc')
复制代码
2.3.2 定义一个画笔
@Entry @Component struct Index {
// 给画笔设置属性，实现抗锯齿处理 setting = new RenderingContextSettings(true) // 2、画笔 context = new CanvasRenderingContext2D(this.setting)
build() { Column() { // 1、定义一个画布 Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc')
} .height('100%') .width('100%') } }
复制代码
2.3.3 画一个带边框的矩形
@Entry @Component struct Index {
// 给画笔设置属性，实现抗锯齿处理 setting = new RenderingContextSettings(true) // 2、画笔 context = new CanvasRenderingContext2D(this.setting)
build() { Column({space:15}) { // 1、定义一个画布 Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc') .onReady(()=>{ // 准备就绪 // 3、画一个带边框的矩形 this.context.strokeRect(100,100,50,50) })
} .height('100%') .width('100%') .justifyContent(FlexAlign.Center) } }
复制代码
编辑
2.3.4 绘制一个带填充的矩形
@Entry@Componentstruct Index { // 给画笔设置属性，实现抗锯齿处理 setting = new RenderingContextSettings(true) // 2、画笔 context = new CanvasRenderingContext2D(this.setting)
build() { Column({ space: 15 }) { // 1、定义一个画布 Canvas(this.context).width('300').aspectRatio(1).backgroundColor('#ccc') .onReady(() => { // 准备就绪 // 3、画一个带填充的矩形 this.context.fillRect(100, 100, 100, 50) })
} .height('100%') .width('100%') .justifyContent(FlexAlign.Center) }}
复制代码
评论