flutter 为什么视频在VideoPlayer中不全屏抖动?

jk9hmnmh  于 2023-03-19  发布在  Flutter
关注(0)|答案(3)|浏览(180)

我复制粘贴了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();
  }
}

输出

tsm1rwdh

tsm1rwdh1#

我使用了一个堆栈小工具,它解决了这个问题。基于以下视频:
https://www.youtube.com/watch?v=x0ZNQ0YXyfE

3qpi33ja

3qpi33ja2#

如果选中_controller.value.aspectRatio,,则value来自视频。
视频是根据其aspectRatio播放的,而不是屏幕的宽高比。
我使用LayoutBuilder来获取屏幕大小,您也使用MediaQuery。在本例中,homme:将如下所示

home: Scaffold(
        body: LayoutBuilder(
          builder: (context, constraints) => _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: constraints.maxWidth / constraints.maxHeight,
                  // _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
      ),

结果

你在考虑顶部和底部的空间,是空的,因为它超出了视频的长宽比。

plicqrtu

plicqrtu3#

你可以使用下面的代码在flutter web中实现全屏模式。

document.documentElement.requestFullscreen();

对于退出,全屏使用下面的.

document.exitFullscreen();

您必须导入import 'dart:html';

相关问题