Flutter 视频播放器检索视频的宽度和高度

Question

我是初学者，不是专业开发人员，我有一个小项目，在列表视图中包含视频列表。我使用 Chewie 包来显示视频。

我使用下面的代码来咀嚼：

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

class ChewieListItem extends StatefulWidget {
  // This will contain the URL/asset path which we want to play
  final VideoPlayerController videoPlayerController;
  final bool looping;

  ChewieListItem({
    @required this.videoPlayerController,
    this.looping,
    Key key,
  }) : super(key: key);

  @override
  _ChewieListItemState createState() => _ChewieListItemState();
}

class _ChewieListItemState extends State<ChewieListItem> {
  ChewieController _chewieController;

  @override
  void initState() {
    super.initState();
    // Wrapper on top of the videoPlayerController
    _chewieController = ChewieController(
      videoPlayerController: widget.videoPlayerController,
      aspectRatio: 16/9,
      // Prepare the video to be played and display the first frame
      autoInitialize: true,
      looping: widget.looping,
      // Errors can occur for example when trying to play a video
      // from a non-existent URL
      errorBuilder: (context, errorMessage) {
        return Center(
          child: Text(
            errorMessage,
            style: TextStyle(color: Colors.white),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {

    return Container(
      height: (MediaQuery.of(context).size.width)/16*9,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20.0),
        color: Colors.red,
      ),
      //padding: const EdgeInsets.all(8.0),
      child: Chewie(
        controller: _chewieController,
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    // IMPORTANT to dispose of all the used resources
    widget.videoPlayerController.dispose();
    _chewieController.dispose();
  }
}

我有两个问题： 第一个是，如果我在构建方法中没有“高度”行

height: (MediaQuery.of(context).size.width)/16*9, 

容器覆盖整个屏幕（纵向模式），视频控制器位于屏幕底部。 第二个问题是，如果我横向翻转屏幕，因为视频的尺寸小于屏幕的宽度，所以我的容器大于视频，并且控制器超出了视频的尺寸。

我应该检索视频的大小以适应父容器的大小，但我不知道该怎么做。

我在构建方法中尝试了以下操作（在 return 语句之前）：

print(widget.videoPlayerController.value.size.width);

但是当我打印它时它给了我0.0。

我还有一个额外的问题，但并不是很烦人：使容器角变圆的边框半径不起作用（事实上它被视频中的矩形角度覆盖）...

你能帮我吗？ 我将不胜感激。

我提前非常感谢您！

问候

伯纳德

Answer 1

@伯纳德

print(widget.videoPlayerController.value.size.width);

如果您的视频尚未加载，

将返回

null

值。

等待

await controller.initialize()

它将初始化您的视频，然后所有值将被设置。

Answer 2

只需将“ChewieListItem Class”包装到Flutter官方文档中提供的

Aspect Ratio Widget

中即可。 这是这个类的参考，

https://api.flutter.dev/flutter/widgets/AspectRatio-class.html

然后给它宽高比 = 16 / 9 或自定义你需要的比例

代码示例

   AspectRatio(
       aspectRatio: 16 / 9,
       child: ChewieListItem(
       videoPlayerController:
        VideoPlayerController.network(
        links[index],
        ),
        looping: false,
      ),
   ),

Answer 3

我遇到了类似的问题......经过尝试和测试，这对我有用。可能是一个糟糕的解决方案

height: controller.value.size.height / (controller.value.aspectRatio * 2)

Answer 4

this is the best solution





> 
             FittedBox(
                fit: BoxFit.fill,
                child: Container(
                  color: Colors.transparent,
                  width: _videoPlayerController.value.size.width,
                  height: _videoPlayerController.value.size.height,
                  child: Chewie(
                    controller: _chewieController!,
                  ),
                ),
              )