video 组件
使用video组件 播放视频
Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})
| 属性 | 说明 |
|---|---|
| src | 视频播放源的路径 |
| currentProgressRate | 表示视频播放倍速 |
| previewUri | 视频未播放时的预览图片路径 |
| controller | 视频控制器 |
使用网络地址时，如https，需要注意的是需要在module.json5文件中申请网络权限
在使用本地资源播放时，当使用本地视频地址我们可以使用媒体库管理模块medialibrary来查询公共媒体库中的视频文件
import mediaLibrary from '@ohos.multimedia.mediaLibrary';async queryMediaVideo() {let option = {// 根据媒体类型检索selections: mediaLibrary.FileKey.MEDIA_TYPE + '=?',// 媒体类型为视频selectionArgs: [mediaLibrary.MediaType.VIDEO.toString()]};let media = mediaLibrary.getMediaLibrary(getContext(this));// 获取资源文件const fetchFileResult = await media.getFileAssets(option);// 以获取的第一个文件为例获取视频地址let fileAsset = await fetchFileResult.getFirstObject();this.source = fileAsset.uri
}
视频支持的规格是：mp4、mkv、webm、TS。
属性
Video({controller: this.controller}).controls(false) //不显示控制栏 .autoPlay(false) // 手动点击播放 .loop(false) // 关闭循环播放
muted
是否静音，默认值：false
autoPlay
是否自动播放。默认值：false
controls
控制视频播放的控制栏是否显示。默认值：true
objectFit
设置视频显示模式。默认值：Cover
objectFit 中视频显示模式包括Contain、Cover、Auto、Fill、ScaleDown、None 6种模式
loop
是否单个视频循环播放。默认值：false
事件
Video({ ... }).onUpdate((event) => {this.currentTime = event.time;this.currentStringTime = changeSliderTime(this.currentTime); //更新事件 }).onPrepared((event) => {prepared.call(this, event); //准备事件 }).onError(() => {prompt.showToast({duration: COMMON_NUM_DURATION, //播放失败事件 message: MESSAGE});...})
onStart
播放时触发该事件。
onStart(event:() => void)
onPause
暂停时触发该事件。
onPause(event:() => void)
onFinish
播放结束时触发该事件。
onFinish(event:() => void)
onError
播放失败时触发该事件。
onError(event:() => void)
onPrepared
视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。
onPrepared(callback:(event?: { duration: number }) => void)
onSeeking
操作进度条过程时上报时间信息，单位为s。
onSeeking(callback:(event?: { time: number }) => void)
onSeeked
操作进度条完成后，上报播放时间信息，单位为s。
onSeeked(callback:(event?: { time: number }) => void)
onUpdate
播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。
onUpdate(callback:(event?: { time: number }) => void)
onFullscreenChange
在全屏播放与非全屏播放状态之间切换时触发该事件。
onFullscreenChange(callback:(event?: { fullscreen: boolean }) => void)
