我复制粘贴了VideoPlayer package的例子但是在网页上没有全屏,我该怎么解决这个问题呢?
示例代码
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
late VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://assets.mixkit.co/videos/preview/mixkit-womans-hands-decorating-a-handmade-soap-2803-large.mp4')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
})
..play()
..setLooping(true);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: _controller.value.isInitialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
输出
3条答案
按热度按时间tsm1rwdh1#
我使用了一个堆栈小工具,它解决了这个问题。基于以下视频:
https://www.youtube.com/watch?v=x0ZNQ0YXyfE
3qpi33ja2#
如果选中
_controller.value.aspectRatio,
,则value
来自视频。视频是根据其
aspectRatio
播放的,而不是屏幕的宽高比。我使用
LayoutBuilder
来获取屏幕大小,您也使用MediaQuery
。在本例中,homme:
将如下所示结果
你在考虑顶部和底部的空间,是空的,因为它超出了视频的长宽比。
plicqrtu3#
你可以使用下面的代码在flutter web中实现全屏模式。
对于退出,全屏使用下面的.
您必须导入
import 'dart:html';