HarmonyOS鸿蒙Next中AVPlayer播放视频如何根据视频实际宽高设置播放模式

HarmonyOS鸿蒙Next中AVPlayer播放视频如何根据视频实际宽高设置播放模式

开发过程中，遇到手机竖屏时拍摄的视频，在AVPlayer播放时，播放不全.

Video组件可以设置objectFit

AVPlayer要怎么做 ？

cke_3121.png

cke_3342.png


更多关于HarmonyOS鸿蒙Next中AVPlayer播放视频如何根据视频实际宽高设置播放模式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

AVPlayer是一个功能较完善的音视频播放API，集成了流媒体和本地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。详细信息可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/media-kit-intro#%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE

关于您所提到的问题，可以通过监听视频尺寸变化事件，动态调整XComponent的缩放模式的方式来实现，具体步骤为：

  1. 获取视频实际宽高

通过监听videoSizeChange事件获取视频原始尺寸：

import media from '@ohos.multimedia.media';

let avPlayer: media.AVPlayer;
let videoWidth: number = 0;
let videoHeight: number = 0;

// 创建AVPlayer并监听尺寸变化
async function initAVPlayer() {
  avPlayer = await media.createAVPlayer();

  // 监听视频尺寸变化
  avPlayer.on('videoSizeChange', (width: number, height: number) => {
    videoWidth = width;
    videoHeight = height;
    console.info(`视频原始尺寸: ${width}x${height}`);
    updateScaleMode(); // 更新缩放模式
  });

  // 设置视频源（示例为网络视频）
  avPlayer.url = 'https://example.com/sample.mp4';
}
  1. 动态计算并设置缩放模式

根据视频宽高比动态调整XComponent的scaleMode：

@State scaleMode: XComponentScaleMode = XComponentScaleMode.SCALE_FIT;

// 根据视频宽高比更新缩放模式
function updateScaleMode() {
  const containerRatio = 16 / 9; // 容器宽高比（根据实际UI调整）
  const videoRatio = videoWidth / videoHeight;

  if (videoRatio > containerRatio) {
    // 宽屏视频：横向填充，纵向裁剪
    this.scaleMode = XComponentScaleMode.SCALE_CROP;
  } else {
    // 竖屏或方屏：完整显示视频（可能带黑边）
    this.scaleMode = XComponentScaleMode.SCALE_FIT;
  }
}
  1. 绑定XComponent显示

在UI中关联XComponent与AVPlayer：

@State surfaceId: string = '';

build() {
  Column() {
    // XComponent显示视频
    XComponent({
      id: 'videoComponent',
      type: 'surface',
      controller: this.xComponentController
    })
      .onLoad(() => {
        this.surfaceId = this.xComponentController.getXComponentSurfaceId();
        avPlayer.displaySurfaceId = this.surfaceId; // 关联Surface
      })
      .scaleMode(this.scaleMode) // 动态缩放模式
      .width('100%')
      .height(300) // 根据实际需求调整

    // 其他控制组件...
  }
}

更多关于HarmonyOS鸿蒙Next中AVPlayer播放视频如何根据视频实际宽高设置播放模式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，使用AVPlayer设置播放模式需通过AVDisplayMode实现。视频实际宽高可通过MediaDescription获取。具体代码示例：

let displayMode = player.getDisplayMode(); // 获取当前显示模式
let description = player.getMediaDescription(); // 获取媒体描述
let videoWidth = description.videoWidth; 
let videoHeight = description.videoHeight;

// 根据宽高比例设置合适模式
if (videoWidth > videoHeight) {
  player.setDisplayMode(AVDisplayMode.AV_DISPLAY_MODE_FIT_CROP);
} else {
  player.setDisplayMode(AVDisplayMode.AV_DISPLAY_MODE_FIT_FULL);
}

支持的显示模式包括AV_DISPLAY_MODE_FIT_FULL（全屏填充）、AV_DISPLAY_MODE_FIT（保持比例）和AV_DISPLAY_MODE_FIT_CROP（裁剪填充）。

在HarmonyOS Next中，AVPlayer可以通过设置Surface的缩放模式来适配视频实际宽高。具体实现方式如下：

  1. 获取视频的原始宽高信息：
let width = avPlayer.width;  // 视频原始宽度
let height = avPlayer.height; // 视频原始高度
  1. 创建Surface时设置缩放模式：
let surfaceId = xcomponentController.getXComponentSurfaceId();
avPlayer.setDisplaySurface(surfaceId).then(() => {
    // 设置缩放模式
    avPlayer.setSurfaceScaleMode(ScaleMode.FIT); // 或ScaleMode.FILL等模式
});
  1. 支持的缩放模式包括：
  • ScaleMode.FIT：保持宽高比，视频完整显示
  • ScaleMode.FILL：保持宽高比，填满Surface
  • ScaleMode.FULL：拉伸填满，不保持宽高比
  1. 对于竖屏视频的特殊处理：
// 根据视频宽高比判断是否为竖屏视频
if (height > width) {
    // 竖屏视频处理
    avPlayer.setSurfaceScaleMode(ScaleMode.FIT);
}

注意：需要先获取视频元数据或等待onPrepared回调触发后才能获取正确的视频宽高信息。

回到顶部