How to set the fit property for video player in Flutter?

user_11687381 0
Viewed 974

I'm using video_player plugin to show video in Flutter. As there is a fit property with Images in Flutter which we can set to BoxFit.cover I want to do the same with video player as well.

Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
            top: 0,
            child: Container(
                color: Colors.amber,
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: VideoPlayer(
                  _controller,
                )),
          ),
       ]
     )

Extra space of the container should not be there I want the video to fit the container.

flutter-dependencies flutter-layout flutter
1 Answers

This doesn't seem to be possible.

On Web the package is actually using html video element to render your video and the only way to resize the video tag would be to use the below css property.

object-fit: fill

It doesn't work with just the height and width control since on web, the html video element just takes up the extra space but doesn't automatically resize the video content.

Use this example and try increasing the height of the video. You will observe that despite it expanding to take the new height, the actual content only appears in a smaller box.

So, considering how object-fit css property is the only way, I tried to comb through the video_player_web package to look for any specific control it provides over css.

But unfortunately, there is no such functionality provided as of yet. As mentioned in their pub page,

Note: This plugin is still under development, and some APIs might not be available yet. Feedback welcome and Pull Requests are most welcome!

Very disappointed :(

user_107808610
Related