原生能力
视频播放
基本介绍
Video组件用于播放视频文件并控制其播放状态，常用于为短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置
Video提供构造参数 Video(value: VideoOptions)
VideoOptions对象包含参数src、currentProgressRate、previewUri、controller。其中，src指定视频播放源的路径，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自定义控制视频。
Video组件支持加载本地视频和网络视频。
加载本地视频
加载本地视频时，首先在本地rawfile目录指定对应的文件
再使用资源访问符$rawfile()引用视频资源。
@Entry
@Component
struct VideoCase {
build() {
Column() {
Video({
src: $rawfile('04功能体检基础质量测试.mp4')
}).width('100%')
.height('50%')
}
.height('100%')
.width('100%')
}
}
加载网络视频
加载网络视频时，需要申请权限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%')
}
}
常用属性
@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%')
}
}
事件调用
@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%')
}
}
完整案例
@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%')
}
}
绘图能力-基本用法
基本介绍
鸿蒙提供画布组件，用于自定义绘制图形，叫Canvas。
ArkUI里面的画布和前端的Canvas的用法基本一致
使用方法
-
放置Canvas组件-给宽和高
-
初始化画笔对象 CanvasRenderingContext2D，将画笔对象作为构造参数传递给Canvas组件
-
可以在Canvas的onReady事件中进行动态绘制
-
绘制方法参考下面官方文档
官方文档地址：
developer.huawei.com/consumer/cn…
接口方法
Canvas(context?: CanvasRenderingContext2D | DrawingRenderingContext)
开发步骤
1、定义一个画布
// 1、定义一个画布
Canvas().width('300').aspectRatio(1).backgroundColor('#ccc')
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%')
}
}
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)
}
}
4、绘制一个带填充的矩形
@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.fillRect(100, 100, 100, 50)
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
