HarmonyOS鸿蒙Next中XComponent和AVplayer实现视频播放，视频被拉伸

HarmonyOS鸿蒙Next中XComponent和AVplayer实现视频播放，视频被拉伸 设置视频宽度充满屏幕宽度，高度根据固定宽高比。然后出现视频被拉伸，如何设置视频不拉伸？

4 回复

原因可能是视频的宽高比跟固定的宽高比不匹配，试试将宽高比改为动态的。可以根据视频的宽高比来动态设置XComponent持有Surface的显示区域，一般视频都是1920:1080或者其他比值

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-xcomponent-V5#setxcomponentsurfacerect12

更多关于HarmonyOS鸿蒙Next中XComponent和AVplayer实现视频播放，视频被拉伸的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


监听视频状态为prepared时，设置VideoScaleType为VIDEO_SCALE_TYPE_FIT_CROP，保持视频宽高比拉伸至填满窗口，内容可能会有裁剪。参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-media-V13#videoscaletype9

在HarmonyOS鸿蒙Next中，使用XComponent和AVPlayer实现视频播放时，视频被拉伸的问题通常与XComponent的宽高比设置和视频的原始宽高比不匹配有关。XComponent用于渲染视频画面，其宽高比应与视频的原始宽高比保持一致，否则会导致视频被拉伸或压缩。

要解决这个问题，可以通过以下方式调整XComponent的宽高比：

  1. 获取视频的原始宽高比：在使用AVPlayer加载视频时，可以通过AVMetadata获取视频的宽度和高度，计算出视频的宽高比。

  2. 动态调整XComponent的宽高比：根据视频的宽高比，动态设置XComponent的宽高比，确保XComponent的宽高比与视频的原始宽高比一致。可以通过XComponent的setSize方法调整其大小。

  3. 保持XComponent的宽高比不变：在布局中确保XComponent的宽高比不会被外部布局强制改变，避免因布局问题导致视频被拉伸。

以下是一个简单的示例代码片段，展示如何根据视频的宽高比调整XComponent的大小：

// 假设已经获取到视频的宽高
let videoWidth = 1920;
let videoHeight = 1080;
let aspectRatio = videoWidth / videoHeight;

// 根据宽高比调整XComponent的大小
let xComponentWidth = 500; // 假设XComponent的宽度为500
let xComponentHeight = xComponentWidth / aspectRatio;

// 设置XComponent的大小
xComponent.setSize({
    width: xComponentWidth,
    height: xComponentHeight
});

通过这种方式，可以确保视频在XComponent中按原始宽高比显示，避免被拉伸或压缩。

在HarmonyOS鸿蒙Next中，使用XComponent和AVPlayer播放视频时，视频被拉伸通常是因为XComponent的宽高比与视频的宽高比不匹配。解决方法如下：

  1. 获取视频宽高比：通过AVPlayer的getVideoSize()方法获取视频的宽高比。
  2. 调整XComponent尺寸：根据视频宽高比动态调整XComponent的宽高，确保与视频比例一致。
  3. 设置缩放模式：在XComponent中设置ScaleType为FIT_CENTER或CENTER_CROP，避免拉伸。

代码示例：

AVPlayer player = new AVPlayer(context);
player.setSource(new AVURLSource(url));
player.prepare();

XComponent xComponent = (XComponent) findComponentById(ResourceTable.Id_xcomponent);
xComponent.setScaleType(XComponent.ScaleType.FIT_CENTER);

// 获取视频宽高比并调整XComponent尺寸
int videoWidth = player.getVideoSize().getWidth();
int videoHeight = player.getVideoSize().getHeight();
float aspectRatio = (float) videoWidth / videoHeight;
xComponent.setLayoutWidth((int) (xComponent.getLayoutHeight() * aspectRatio));

通过调整XComponent尺寸和缩放模式，可以避免视频被拉伸。

回到顶部