HarmonyOS 鸿蒙Next 使用XComponent呈现视频时怎样保持视频画面的原始宽高比例而不随XComponent的宽高拉伸变形

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 使用XComponent呈现视频时怎样保持视频画面的原始宽高比例而不随XComponent的宽高拉伸变形 怎么获得视频的原始宽高比例？

Harmonyos Next教程
3 回复

可以先使用AVMetadataExtractor来提取视频元数据，获取videoHeight和videoWidth，再将XComponent的宽高设置为同比例的宽高比来防止视频被拉伸

Button('获取视频宽高')
  .type(ButtonType.Capsule)
  .margin({ top: 20 })
  .backgroundColor('#0D9FFB')
  .width('60%')
  .height('5%')
  .onClick(async () => {
    let avMetadataExtractor = await media.createAVMetadataExtractor()
    avMetadataExtractor.fdSrc = fileIo.openSync(getContext().filesDir + '/videoTest.mp4');
    let metadata = await avMetadataExtractor.fetchMetadata()
    console.log(metadata.videoWidth + '')
  })

具体参考使用AVMetadataExtractor提取音视频元数据信息：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/avmetadataextractor-V13

更多关于HarmonyOS 鸿蒙Next 使用XComponent呈现视频时怎样保持视频画面的原始宽高比例而不随XComponent的宽高拉伸变形的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


media.AVPlayer可以监听stateChange，在state='prepared’时，可以通过AVPlayer对象直接获取到视频的width和height。

之后可以通过XComponent把surfaceId绑定到AVPlayer上面，后面可以通过计算AVPlayer的widht和height的比例，保持比例不变。下面是我这边计算的具体方法可供参考

private _computeVideoSize(event: PreparedEvent): Size {
  let info = this.getUIContext().getComponentUtils().getRectangleById(this.videoId);
  let scale = event.width / event.height; //宽高比
  let computeHeight = info.size.width / scale;
  let width = info.size.width;
  let height = computeHeight;
  if (computeHeight > info.size.height) {
    let computeWidth = info.size.height * scale;
    height = info.size.height;
    width = computeWidth;
  }
  while (width > info.size.width) {
    height -= 1;
    width = height * scale;
  }
  while (height > info.size.height) {
    width -= 1;
    height = width / scale;
  }
  let size: Size = { width: width, height: height }
  return size;
}

在HarmonyOS 鸿蒙Next系统中，使用XComponent呈现视频时，若要保持视频画面的原始宽高比例而不随XComponent的宽高拉伸变形，可以通过设置视频的显示模式来实现。

具体来说，可以在XComponent的视频呈现逻辑中，设置视频播放器控件的显示模式为“保持宽高比”。这通常意味着视频播放器会根据其容器的尺寸自动调整视频的显示区域，以确保视频内容不会因容器的宽高变化而被拉伸或压缩，从而保持其原始的宽高比例。

实现方式可能依赖于你使用的具体视频播放器控件或库。你需要查阅该控件或库的文档，找到设置显示模式的属性或方法，并将其设置为“保持宽高比”或类似的选项。

例如，如果使用的是某个第三方视频播放器库，可能会有一个类似于setAspectRatioMode(AspectRatioMode.PRESERVE_ASPECT_FIT)的方法，用于设置视频的宽高比模式为保持原始比例并适应容器。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部