如何让视频在不拉伸的情况下填满屏幕（使用 Chewie 或类似工具）？

Question

正如标题所说，是否可以让视频充满屏幕而不出现明显的拉伸？如果是这样，我该如何用咀嚼做到这一点？

咀嚼链接： https: //pub.dev/packages/chewie

问题：

播放器填满屏幕，但视频被拉伸，因为我使用了 MediaQuerys，但除了提供宽高比之外，我不知道有任何其他方法可以更改播放器的大小。我需要保留视频的宽高比，但还要让视频适合屏幕。

我当前的代码：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';

class MyVideoPlayer extends StatefulWidget {
  final String path;

  MyVideoPlayer({Key key, @required this.path}) : super(key: key);

  @override
  _MyVideoPlayerState createState() => new _MyVideoPlayerState();
}

class _MyVideoPlayerState extends State<MyVideoPlayer> {
  VideoPlayerController _videoPlayerController;
  ChewieController _chewieController;
  Future<void> _future;
  TargetPlatform _platform;

  Future<void> initVideoPlayer() async {
    await _videoPlayerController.initialize();
    setState(() {
      print(_videoPlayerController.value.aspectRatio);
      _chewieController = ChewieController(
        aspectRatio: MediaQuery.of(context).size.width/ MediaQuery.of(context).size.height,
        videoPlayerController: _videoPlayerController,
        autoPlay: false,
        looping: false,
        // showControls: false,
        materialProgressColors: ChewieProgressColors(
          playedColor: Colors.red,
          handleColor: Colors.blue,
          backgroundColor: Colors.grey,
          bufferedColor: Colors.lightGreen,
        ),
        // placeholder: Container(
        //   color: Colors.grey,
        // ),
      );
    });
  }

  @override
  void initState() {
    super.initState();
    // _controller = VideoPlayerController.network('https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4');
    _videoPlayerController = VideoPlayerController.file(File(widget.path));
    _future = initVideoPlayer();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        platform: _platform ?? Theme.of(context).platform,
      ),
      home: Scaffold(
        body: FutureBuilder(
            future: _future,
            builder: (context, snapshot) {
              return _videoPlayerController.value.initialized
                  ? Chewie(
                    controller: _chewieController,
                  )
                  : Center(child: CircularProgressIndicator());
            }),
      ),
    );
  }

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }
}

Answer 1

    // an arbitrary value, this can be whatever you need it to be
    double videoContainerRatio = 0.5;

    double getScale() {
      double videoRatio = _videoPlayerController.value.aspectRatio;
     
      if (videoRatio < videoContainerRatio) {
      ///for tall videos, we just return the inverse of the controller aspect ratio
        return videoContainerRatio / videoRatio;
      } else {
        ///for wide videos, divide the video AR by the fixed container AR
        ///so that the video does not over scale

        return videoRatio / videoContainerRatio;
      }
    }

1. 将 AspectRatio 放置在小部件树中尽可能高的位置，可能位于 Chewie 的正上方。这将确定视频的边界。

   AspectRatio(
     aspectRatio: videoContainerRatio,
     child: Chewie(...),
   )
   

2. 将Chewie包装在 Stack() 中。

3. 现在将您的 Chewie 包裹在一个新的 AspectRatio 中，并将其比率设置为 _videoPlayerController 的宽高比：

   AspectRatio(
     aspectRatio: videoContainerRatio,
     child: Stack(
        children: <Widget>[
          AspectRatio(
            aspectRatio: _videoPlayerController ,
            child: Chewie(...),
          ),
      ]
   ),
   

4. 现在将新的 AspectRatio 包装在 Transform.scale() 中，如下所示：

   Transform.scale(
     scale: getScale(),
     child: AspectRatio(
        aspectRatio: _videoPlayerController ,
        child: Chewie(...),
     ),
   );
   

Answer 2

我认为这是因为您的视频不适合屏幕宽高比的宽度和高度。如果你只是使用

aspectRatio: _videoPlayerController.value.aspectRatio,

您将看到视频的宽度和高度。

您可以将 Chewie 包裹在具有固定高度/宽度的容器中，并调整长宽比。我猜你需要拉伸它以适应整个屏幕。