How to effectively implement a feed of Video Players in Flutter

[Michel Rahme]

Hi,

I have been trying to implement a feed of Videos like the one fond in TikTok for a while now.

I'm trying to achieve the above with the best possible performance without Jank and lags.

I have tried using a vertical PageView builder with each page initializing a network video controller (Video_Player package).
Also tried using a listView builder as well. Both were not optimal and I still experienced lags and most importantly crashes when certain number of videos were loaded in the app. (Let's say a user has been scrolling through videos for a minute or so).

Recently I have been trying to initialize my video in separate isolate. This has proven very hard to do. The idea is to have all if my videos initialized on a separate isolate. This is difficult however since video require the UI thread if I'm right.

Has anyone ever achieved such task ? An optimal feed of videos that a user can scroll through ?

Can I please get some insights on what can I do to implement it? All help is very much appreciated!

Best,
Mike

[Andy Greenshaw]

How many in the list?
Are they all supposed to be playing?

Cheers,
Andy

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/1d8faa30-2231-43f5-8f79-abc0c82189eco%40googlegroups.com.

[Michel Rahme]

The video takes up the whole screen, and the user can scroll through an infinite list of videos. 

So my issue is how to initialize, dispose, preload etc.. these videos while the user is scrolling.

Thanks,

Mike

On Tuesday, July 28, 2020 at 12:05:47 PM UTC-4, Andy Greenshaw wrote:

How many in the list?
Are they all supposed to be playing?

Cheers,
Andy

On Jul 28, 2020, 4:59 PM +0100, Michel Rahme <michel...@gmail.com>, wrote:

Hi,

I have been trying to implement a feed of Videos like the one fond in TikTok for a while now.

I'm trying to achieve the above with the best possible performance without Jank and lags.

I have tried using a vertical PageView builder with each page initializing a network video controller (Video_Player package).
Also tried using a listView builder as well. Both were not optimal and I still experienced lags and most importantly crashes when certain number of videos were loaded in the app. (Let's say a user has been scrolling through videos for a minute or so).

Recently I have been trying to initialize my video in separate isolate. This has proven very hard to do. The idea is to have all if my videos initialized on a separate isolate. This is difficult however since video require the UI thread if I'm right.

Has anyone ever achieved such task ? An optimal feed of videos that a user can scroll through ?

Can I please get some insights on what can I do to implement it? All help is very much appreciated!

Best,
Mike

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutt...@googlegroups.com.

[Andy Greenshaw]

You don’t mention whether they are auto play.

I would make a class for each video that initializes a controller (in initState) and disposes it in dispose.
Use a ListView.builder so it only creates the one’s onscreen (and immediately above/below).
Show a CircularProgressIndicator until ‘playing’ state reached.

I wouldn’t prefetch, that will be more trouble than it is worth.

I’ve done this (4 videos per screen, each plays when > 80% visible, so can have 4 playing videos at any time). Works fine, no issues, no jank.

Cheers,
Andy

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/cdb33710-9cb9-4802-9a81-ff3ba22cb8dao%40googlegroups.com.

[Wajahat Ali]

Hello

Can you please share your code in which you implemented the video player?
I tried something similar to it but it still had lags and performance issues..

Thanks,

Wajahat Ali

[Adolfo Cueto]

I have the same problem, i developed a feed within a SliverList, i'm using VisibilityDetector for play and pause but when i scroll down or scroll up the app feel so laggy.

[yash1...@gmail.com]

Can you share the source here if possible andy? I am going with a similar situation. Will help if I could get the source code

[Jitendra Kumar Kumawat]

Hello, My Dear Friend! Please like and subscribe to this youtube channel! Here you learn : 1: Creating a Modern Promo Video in After Effect 2: Modern Mobile Application Development in Flutter  

3: Modern Web App with React-Hooks. 4: Modern Video Editing 5: Principle of Animation 6: Creating JavaScript Games. https://youtu.be/cWnMXlFL_Qs

To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/a2c2c808-f957-473b-bf6a-41a5aad44eaen%40googlegroups.com.