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

Posted

技术标签:

【中文标题】Flutter 视频播放器检索视频的宽度和高度【英文标题】:Flutter video player retrieve width and height of the video 【发布时间】:2021-06-28 16:37:17 【问题描述】:

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

我将下面的代码用于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, 

容器覆盖整个屏幕(纵向模式),视频控制器位于屏幕底部。 第二个问题是,如果我横向翻转屏幕,因为视频的大小小于屏幕的宽度,我的容器比视频大,并且控制器超过了视频的大小。

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

我在 build 方法中尝试了以下内容(在 return 语句之前):

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

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

我还有一个额外的问题,但不是很烦人:圆容器角的边框半径不起作用(实际上它被矩形角的视频覆盖)...

你能帮帮我吗? 我会很感激的。

提前非常感谢你!

问候

伯纳德

【问题讨论】:

在尝试获取视频大小之前,您是否验证了视频播放器控制器已初始化?但我不认为这是你想要的。一般来说,本指南可能会很有趣,以了解更多有关 Flutter 中如何处理约束的信息:flutter.dev/docs/development/ui/layout/constraints 此问题也有一些可能相关的讨论:flutter.dev/docs/development/ui/layout/constraints 您好,视频播放器控制器似乎在初始化状态下初始化。我可以在模拟器上看到视频,所以我想它已正确初始化。我想我必须检索视频的尺寸才能将这些尺寸分配给父容器。我的问题是我不知道该怎么做... 【参考方案1】:

@伯纳德

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

如果您的视频尚未加载,将返回 null 值。

等待await controller.initialize(),它将初始化您的视频,之后将设置所有值。

【讨论】:

以上是关于Flutter 视频播放器检索视频的宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

如何根据视频的高度和宽度设置屏幕方向

获取 YouTube 视频尺寸(宽度/高度)

使用 CSS 缩放对象元素高度与宽度成比例 + 常量

桌面查看不同的视频和移动查看不同的视频自动播放

iframe 视频宽度、高度全屏播放,用width="100%" height="100%"没有效果

QTKit - 合并两个不同宽度和高度的视频?