flutter - 在视频上放置文字-Flutter-web

Question

我正在尝试在视频上放置一些文字。

该视频目前在保留其原始纵横比的同时会占用尽可能多的空间。理想情况下，我希望它继续执行此操作，因为我希望调整视频大小以适合浏览器窗口。

我假设我需要动态获取视频的高度/宽度。

如果有人知道如何自动播放视频，那也很好-我正在使用video_player包。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      drawer: ResponsiveLayout.isSmallScreen(context) ? NavDrawer() : null,
      body: Container(
        child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              NavBar(),
              Body(),
              Footer(),
            ],
          ),
        ),
      ),
    );
  }
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveLayout(
      largeScreen: LargeScreen(),
      mediumScreen: LargeScreen(),
      smallScreen: LargeScreen(),
    );
  }
}

class LargeScreen extends StatefulWidget {
  @override
  _LargeScreenState createState() => _LargeScreenState();
}

class _LargeScreenState extends State<LargeScreen> {
  VideoPlayerController _videoPlayerController;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _videoPlayerController = VideoPlayerController.asset(
      'assets/videos/video.mp4',
    );
    _initializeVideoPlayerFuture = _videoPlayerController.initialize();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: Column(
        children: <Widget>[
          FutureBuilder(
            future: _initializeVideoPlayerFuture,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                // If the VideoPlayerController has finished initialization, use
                // the data it provides to limit the aspect ratio of the VideoPlayer.
                return AspectRatio(
                  aspectRatio: _videoPlayerController.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: VideoPlayer(_videoPlayerController),
                );
              } else {
                // If the VideoPlayerController is still initializing, show a
                // loading spinner.
                return Center(child: CircularProgressIndicator());
              }
            },
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _videoPlayerController.dispose();
  }
}

Answer 1

您可以将小部件包装在堆栈小部件中，并使用定位来定位文本

 AspectRatio(
                  aspectRatio: _videoPlayerController.value.aspectRatio,
                  // Use the VideoPlayer widget to display the video.
                  child: Stack(children:<Widget>[
                  VideoPlayer(_videoPlayerController),
                   Positioned(bottom:10,left:10,
               child:Text("my text here))
               ])
            )

更新

If anyone knows how to make a video play automatically that would be great as well - I'm using the video_player package. you can set the state of your video using your controller

_videoPlayerController.value.isPlaying

I want the video to resize to fit the browser window.

您可以将视频包装在 SizedBox.expand中，该代码会创建一个框，该框将变得其父级允许的尺寸变大。
sized box constructors