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

Question

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),
                ),
             ),
          ),
       ],
    ),
)

Answer 1

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();
}