How to play two videos side by side mode simultaneously in flutter

0 votes

I need to play two videos simultaneously side by side for comparison. I am able to get the UI done. But only one video plays at one time. The other video plays only I pause the other video. I need two play both the videos simultaneously. Below is my current code :

SizedBox(
   width: deviceWidth,
   height: deviceHeight,
   child: Row(
      mainAxisSize: MainAxisSize.max,
      children: [
         SizedBox(
            width: deviceWidth / 2,
            child: _controller1 != null
            ? Chewie(
               controller: ChewieController(
               videoPlayerController: _controller1!,
               autoPlay: true,
               looping: true,
            ),
         )
         : const Center(
            child: Text(
               'No video selected',
                style: TextStyle(color: Colors.white),
             ),
          ),
       ),
       SizedBox(
          width: deviceWidth / 2,
          child: _controller2 != null
              ? Chewie(
                 controller: ChewieController(
                 videoPlayerController: _controller2,
                 autoPlay: true,
                 looping: true,
               ),
            )
            : const Center(
               child: Text(
                  'No video selected',
                   style: TextStyle(color: Colors.white),
                ),
             ),
          ),
       ],
    ),
)

Apr 13 in Flutter by Ashwini
• 5,390 points
759 views

1 answer to this question.

0 votes

To play two videos side by side simultaneously in Flutter, you need to create separate video player controllers for each video and play them simultaneously. You can modify your code to create two separate controllers and initialize them with separate video files, like this:

final _controller1 = VideoPlayerController.asset('video1.mp4');
final _controller2 = VideoPlayerController.asset('video2.mp4');

Then, you can use the FutureBuilder widget to wait for both controllers to initialize and build the UI once both controllers are ready:

SizedBox(
  width: deviceWidth,
  height: deviceHeight,
  child: FutureBuilder(
    future: Future.wait([
      _controller1.initialize(),
      _controller2.initialize(),
    ]),
    builder: (BuildContext context, AsyncSnapshot snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return Center(
          child: CircularProgressIndicator(),
        );
      } else {
        return Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(
              width: deviceWidth / 2,
              child: Chewie(
                controller: ChewieController(
                  videoPlayerController: _controller1,
                  autoPlay: true,
                  looping: true,
                ),
              ),
            ),
            SizedBox(
              width: deviceWidth / 2,
              child: Chewie(
                controller: ChewieController(
                  videoPlayerController: _controller2,
                  autoPlay: true,
                  looping: true,
                ),
              ),
            ),
          ],
        );
      }
    },
  ),
)

In the above code, the FutureBuilder widget waits for both controllers to initialize using the Future.wait method and then builds the UI once both controllers are ready. Once both controllers are ready, you can create two separate Chewie widgets, one for each controller, and add them to a Row widget to display them side by side.

Note that you should also dispose the video player controllers when the widget is disposed to avoid memory leaks:

@override
void dispose() {
  _controller1.dispose();
  _controller2.dispose();
  super.dispose();
}

answered Apr 13 by vinayak

Related Questions In Flutter

0 votes
1 answer

How to change Android minSdkVersion in Flutter Project?

Yes, you can change the minSdkVersion in ...READ MORE

answered Mar 21 in Flutter by Tej
2,372 views
0 votes
1 answer

How to implement drop down list in flutter?

You're close! The error you're getting is ...READ MORE

answered Mar 26 in Flutter by vishalini
1,286 views
0 votes
1 answer

How to create a circle icon button in Flutter?

To create a circle icon button in ...READ MORE

answered Mar 27 in Flutter by Tanishqa
• 1,170 points
5,412 views
0 votes
1 answer

How to dynamically resize text in Flutter?

You can use the FittedBox widget to ...READ MORE

answered Mar 27 in Flutter by Tej
3,776 views
0 votes
1 answer
0 votes
1 answer

How to change flutter project name and id?

Yes, it is possible to change the ...READ MORE

answered Mar 20 in Flutter by pooja
1,129 views
0 votes
1 answer

How can I change the app display name build with Flutter?

Yes, you can change the app display ...READ MORE

answered Mar 21 in Flutter by venky
1,203 views
0 votes
1 answer
0 votes
1 answer

How to get barcode from PDA scanner device in flutter

It's possible that the data sent by ...READ MORE

answered Apr 3 in Flutter by seena
594 views
0 votes
1 answer

How to prevent deprecated flutter widgets suggestions in vs code?

To prevent deprecated Flutter widgets suggestions in ...READ MORE

answered Apr 6 in Flutter by vinayak
284 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP