如何获得视频的实际纵横比？

Question

我不希望我的视频看起来很拉长。我使用Chewieflutter 包作为我的视频播放器。

我尝试使用_controller.value.size.aspectRatio但它返回一个错误 The getter 'aspectRatio' was called on null.

这是我从画廊获取视频的代码：

Future uploadVideoFromGallery() async {
    print("CALLED");
    Map<PermissionGroup, PermissionStatus> permissions =
        await PermissionHandler().requestPermissions(
            [PermissionGroup.storage, PermissionGroup.camera]);

    if (permissions[PermissionGroup.storage] == PermissionStatus.granted) {
      var videoFile = await ImagePicker.pickVideo(source: ImageSource.gallery);
      if (videoFile != null) {
        getVideoThumbnail(videoFile.path);
        setState(() {
          isFileImage = false;
          image = videoFile;
          _controller = VideoPlayerController.file(image);
        });

        print(videoFile.path);
      }
    } else {
      debugPrint('permission not granted');
    }
  }

这是我放置的代码videoFile：

Chewie(
                        controller: ChewieController(
                          videoPlayerController: _controller,
                          aspectRatio: _controller.value.size.aspectRatio,
                          materialProgressColors: ChewieProgressColors(
                            playedColor: Color(colorSecondary),
                            handleColor: Color(colorPrimary),
                            bufferedColor: Color(colorPrimary),
                          ),
                          placeholder: Container(
                            color: Colors.grey,
                          ),
                          autoInitialize: true,
                          looping: false,
                          errorBuilder: (context, errorMessage) {
                            return Center(
                              child: Text(
                                errorMessage,
                                style: TextStyle(color: Color(colorText)),
                              ),
                            );
                          },
                        ),
                      )

Answer 1

github上有一个关于相同的问题。

import 'package:flutter/material.dart';
import 'dart:io';
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;

  Future<void> initVideoPlayer() async {
    await _videoPlayerController.initialize();
    setState(() {
      print(_videoPlayerController.value.aspectRatio);
      _chewieController = ChewieController(
        videoPlayerController: _videoPlayerController,
        aspectRatio: _videoPlayerController.value.aspectRatio,
        autoPlay: false,
        looping: false,
      );
    });
  }

  @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 new FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        return new Center(
          child: _videoPlayerController.value.initialized
          ? AspectRatio(
            aspectRatio: _videoPlayerController.value.aspectRatio,
            child: Chewie(
              controller: _chewieController,
            ),
          )
          : new CircularProgressIndicator(),
        );
      }
    );
  }

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

这是 github 网址

Answer 2

如果您仅使用常规video_player包，则可以使用以下代码显示视频的未拉伸版本：

return FittedBox(
      fit: BoxFit.cover,
      child: SizedBox(
        height: model.videoPlayerController.value.size?.height ?? 0,
        width: model.videoPlayerController.value.size?.width ?? 0,
        child: VideoPlayer(model.videoPlayerController),
      ),
    );

我也写了一篇关于在 Flutter 中显示来自 URL 的视频的文章。

Answer 3

better_player 插件解决方案。

在初始化状态中：

betterPlayerController = BetterPlayerController(
      betterPlayerConfiguration,
      betterPlayerDataSource: betterPlayerDataSource,
);

betterPlayerController.addEventsListener((BetterPlayerEvent event) {
      if (event.betterPlayerEventType == BetterPlayerEventType.initialized) {
        betterPlayerController.setOverriddenAspectRatio(
            betterPlayerController.videoPlayerController.value.aspectRatio);
        setState(() {});
      }
});

在体内：

BetterPlayer(controller: betterPlayerController),