Android Studio Question posted in
The official documentation can be found here.

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

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

Tags:

4

Answers


  1. 0

    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(),
);
    Login or Signup to reply.
  2. 0

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

    Login or Signup to reply.
  3. 0

    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',
          ),
        );
      },
    );
  },
);
    Login or Signup to reply.
  4. 0

    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search