鸿蒙(HarmonyOS)应用开发——viedo组件
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。
属性
属性
muted
autoPlay
controls
objectFit
loop
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
事件
事件
onStart
onPause
onFinish
onError
onPrepared
onSeeking
onSeeked
onUpdate
onFullscreenChange
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)