Flutter播放视频时如何适配不同分辨率？

在Flutter开发中，遇到视频播放时需要适配不同分辨率的问题。目前使用video_player插件播放视频，但不同设备的屏幕分辨率差异较大，导致视频要么被拉伸变形，要么出现黑边。尝试过设置aspectRatio，但效果不理想，特别是在全屏播放时。想请教大家：

如何自动适配不同分辨率设备，确保视频比例正确且填充屏幕？
在全屏模式下如何处理不同长宽比的视频？
是否有更好的插件或方案可以实现智能适配？
如何处理旋转屏幕时的分辨率适配问题？

希望能得到具体的代码示例或最佳实践建议。

ionicwang 1楼

在Flutter中播放视频并适配不同分辨率，可以通过以下方式实现：

使用video_player插件加载视频。首先初始化VideoPlayerController，然后将其传递给VideoPlayer小部件。
使用AspectRatio小部件来设置视频的宽高比。例如，如果你知道视频的原始宽高比是16:9，可以这样写：
```
AspectRatio(
  aspectRatio: 16 / 9,
  child: VideoPlayer(controller),
)
```
如果视频分辨率多样且不固定，可以先获取视频的元数据（如宽度和高度），再动态计算宽高比。使用video_player的initialize()方法后，可以通过controller.value.aspectRatio获取。
结合MediaQuery获取屏幕尺寸，根据屏幕比例动态调整视频显示区域，避免拉伸或裁剪。
对于极端情况，还可以添加黑边（pillarbox或letterbox）来保持原始画面比例。

通过以上方法，你可以让视频在不同分辨率下都能良好适配。

更多关于Flutter播放视频时如何适配不同分辨率？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 2楼

在Flutter中播放视频并适配不同分辨率，可以使用video_player插件。首先初始化视频控制器，加载视频源：

VideoPlayerController _controller = VideoPlayerController.network(
  'https://example.com/video.mp4',
);

@override
void initState() {
  super.initState();
  _controller.initialize().then((_) {
    _controller.setLooping(true);
    _controller.play();
  });
}

为了适配不同分辨率，可以将视频控件包裹在AspectRatio中，设置合适的宽高比：

AspectRatio(
  aspectRatio: _controller.value.aspectRatio, // 获取视频原始比例
  child: VideoPlayer(_controller),
)

如果视频比例与屏幕不匹配，可以结合FittedBox和BoxFit.cover来保持画面完整性和填充屏幕：

FittedBox(
  fit: BoxFit.cover,
  child: SizedBox(
    width: _controller.value.videoWidth.toDouble(),
    height: _controller.value.videoHeight.toDouble(),
    child: VideoPlayer(_controller),
  ),
)

此外，通过监听视频的value属性动态调整UI，确保在不同分辨率下表现良好。

eggper 3楼

在Flutter中适配不同分辨率的视频播放，可以通过以下方法实现：

使用video_player插件时，建议配合AspectRatio组件：

AspectRatio(
  aspectRatio: controller.value.aspectRatio,
  child: VideoPlayer(controller),
)

如果需要固定比例，可以手动设置：

Container(
  height: MediaQuery.of(context).size.width * 9/16,
  child: VideoPlayer(controller),
)

全屏适配方案：

LayoutBuilder(
  builder: (context, constraints) {
    return SizedBox(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      child: FittedBox(
        fit: BoxFit.contain,
        child: VideoPlayer(controller),
      ),
    );
  },
)

关键点：

获取视频原始宽高比：controller.value.aspectRatio
结合MediaQuery获取设备尺寸
使用FittedBox自动缩放
考虑使用chewie插件提供更完整的UI控制