在视频上定位文本 - Flutter-web

Question

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

视频目前在保持原始宽高比的同时尽可能多地 space。理想情况下，我希望它继续这样做，因为我希望视频调整大小以适应浏览器 window。

我假设我需要动态获取视频的 height/width..

如果有人知道如何自动播放视频，那就太好了 - 我正在使用 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

在视频上定位文本 - Flutter-web

Position Text over Video - Flutter-web

dart

flutter

flutter-layout

flutter-web