How to auto pause video when scrolling / when the player is not visible on screen in flutter

Question

I am working with a video player called 'flick video player'. I can play videos fairly okay with default functionality. The problem occurs when I scroll down the screen and the video continues to play in the background. I would like to pause it when it isn't visible, or when a user navigates to a different page on the project app.

The video player that I am using (flick_video_player) has video_player as its dependency.

Answers are much appreciated. Regards

Answer 1

I think you can use visibility detector for the purpose-

VisibilityDetector(
                            key: ObjectKey(flickManager),
                            onVisibilityChanged: (visibility){
                              if (visibility.visibleFraction == 0 && this.mounted) {
                                flickManager?.flickControlManager?.pause();//pausing  functionality 
                              }

                            },
                            child: Container(
                              child: AspectRatio(
                                aspectRatio: 1280/720,
                                child: FlickVideoPlayer(
                                    flickManager: flickManager
                                ),
                                /*VideoPlayer(
                                    video_controller
                                ),*/
                              ),
                            ),
                          ),

I was working on something similar. For more info like how to play it again and more you can refer this repo- https://github.com/GeekyAnts/flick-video-player/tree/master/example/lib/feed_player

Hope it helped!