鸿蒙(HarmonyOS)应用开发——viedo组件

video 组件

使用video组件播放视频

Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})

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
}

属性

 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)

layman0528