Home > Back-end >  Flutter video_player initialization error when initializing multiple videos
Flutter video_player initialization error when initializing multiple videos

Time:10-28

Problem I need help with

Assist with optimizing latency in its "Short-Video Feed" and solving intermittent performance bugs. A central feature of my app requires seamless plays 15 to 60 second clips when users use "swipe up" hand gestures similarly to TikTok and Instagram reels. Right now, I have performance bugs (intermittent) such as black screens, delayed loading screens, sometimes long loading, etc.

The bugs may be caused because Flutter is slower than Native iOS. However, our "Short-Video Feed" has lots of bugs whether I use a M3U8 (Mux), or whether I use a MP4 based approach with AWS S3.

If I use the Mux based approach with M3U8, "Short-Video Feed" there is a noticeable few milliseconds black screen for each short-video playback.

If I use the Amazon based approach with MP4, "Short-Video Feed" intermittently loads for a few seconds (sometimes minutes) when there is low bandwidth, and some videos get stuck even when a user returns to a location with faster bandwidth.

Open issue on Flutter

https://github.com/flutter/flutter/issues/25558

Approaches I have tried with no success:

  • Native Player. I tried to use a native video player for Android/iOS, with MP4 and M3U8, but the UI was still very laggy (because of data transfer between Android/iOS and flutter latenices).

  • Flutter Player. I tried to use a Flutter video player for Android/iOS, with MP4 and M3U8, but the UI shows a black screen with M3U8 & heavy loading for poor internet connections with MP4.

Approaches I need help to try:

  • Optimize M3U8 player to minimize the black screen issue. or...
  • Create MP4 chunks to optimize for poor reception areas (this is what I think TikTok Instagram Reels, and similar applications do based on what I can see).

Has anyone solved this issue?

CodePudding user response:

It works perfectly using video_player by initialising and buffering the next video while the current video is playing.

Preloading or buffering of the 'next' video is done by creating a separate VideoPlayerController object, while the current video is playing using your 'current' controller.

Once the current video has ended just set the preloaded controller with the 'next' video to the VideoPlayer widget as current controller.

And of course, don't forget to dispose the controller for the ended video.

CodePudding user response:

How about isolating whether these lags are due to network buffering or due to Flutter (or even a device hardware limitation such as memory or GPU)? Perhaps use a few local MP4 files with identical frame rates and encoding parameters (both video and audio) and see whether the UI lag is reproducible upon swipe-up scrolling?

  • Related