How to auto pause video when scrolling / when the player is not visible on screen in flutter - 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!

Answer 2

Maybe this visibility detector package can help https://pub.dev/packages/visibility_detector

Answer 3

Wrap your list of videos with a NotificationListener and listen to whether the user has started or stopped scrolling. Use this value to either play or pause your video.
Edit: misread your question. This will work for pausing once the user scrolls. If you want to detect whether the video is within the current view, check out ScrollablePositionedList.
return NotificationListener(
onNotification: (notificationInfo) {
if (notificationInfo is ScrollStartNotification) {
// Set a state value to indicate the user is scrolling
}
if (notificationInfo is ScrollEndNotification) {
// Set a state value to indicate the user stopped scrolling
}
return true;
},
child: YourVideos(),
);

Answer 4

This is exactly what you need, inview_notifier_list:
InViewNotifierList(
isInViewPortCondition:
(double deltaTop, double deltaBottom, double vpHeight) {
return deltaTop < (0.5 * vpHeight) && deltaBottom > (0.5 * vpHeight);
},
itemCount: 10,
builder: (BuildContext context, int index) {
return InViewNotifierWidget(
id: '$index',
builder: (BuildContext context, bool isInView, Widget child) {
return Container(
height: 250.0,
color: isInView ? Colors.green : Colors.red,
child: Text(
isInView ? 'Is in view' : 'Not in view',
),
);
},
);
},
);