gpt4 book ai didi

flutter - 如何让视频在不拉伸(stretch)的情况下填满屏幕(使用 Chewie 或类似工具)?

转载 作者:行者123 更新时间:2023-12-04 04:12:20 50 4
gpt4 key购买 nike

正如标题所说,是否可以让视频充满屏幕而没有可见的拉伸(stretch)?如果是这样,我将如何用chewie做到这一点?

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

问题 :
enter image description here

播放器填满了屏幕,但视频被拉伸(stretch)了,因为我使用了 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();
}
}

最佳答案

    // 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;
}
}
  • 在您的小部件树中尽可能高地放置 AspectRatio,可能直接位于 Chewie 上方。这将确定视频的边界。
    AspectRatio(
    aspectRatio: videoContainerRatio,
    child: Chewie(...),
    )
  • 将 Chewie 包裹在 Stack() 中。
  • 现在将 Chewie 包装在一个新的 AspectRatio 中,并将其比率设置为 _videoPlayerController 纵横比:
    AspectRatio(
    aspectRatio: videoContainerRatio,
    child: Stack(
    children: <Widget>[
    AspectRatio(
    aspectRatio: _videoPlayerController ,
    child: Chewie(...),
    ),
    ]
    ),
  • 现在将新的 AspectRatio 包装在 Transform.scale() 中,如下所示:
    Transform.scale(
    scale: getScale(),
    child: AspectRatio(
    aspectRatio: _videoPlayerController ,
    child: Chewie(...),
    ),
    );
  • 关于flutter - 如何让视频在不拉伸(stretch)的情况下填满屏幕(使用 Chewie 或类似工具)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61492068/

    50 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com