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, 2023 in Flutter by Ashwini
• 5,430 points
2,146 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, 2023 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, 2023 in Flutter by Tej
10,961 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, 2023 in Flutter by vishalini
4,011 views
0 votes
2 answers

How to create a circle icon button in Flutter?

To create something similar to a FloatingActionButton, ...READ MORE

answered Aug 23, 2023 in Flutter by anonymous
• 140 points
14,107 views
0 votes
1 answer

How to dynamically resize text in Flutter?

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

answered Mar 27, 2023 in Flutter by Tej
8,867 views
0 votes
1 answer

I am creating mobile application on flutter but facing error of tflite library

The error you're encountering means that there ...READ MORE

answered Mar 18, 2023 in Android by pooja
914 views
0 votes
1 answer

How to change flutter project name and id?

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

answered Mar 20, 2023 in Flutter by pooja
4,700 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, 2023 in Flutter by venky
2,558 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, 2023 in Flutter by seena
1,876 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, 2023 in Flutter by vinayak
1,028 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