[BUG]: Video first frame do flickering when player load video and start playing, Demo Attached

[ZakirBangash]

Version

react-native-video: ^6.0.0-rc.0

react-native: 0.71.14

Video URL: HLS m3u8

What platforms are you having the problem on?

Android

Architecture

Old architecture

What happened?

I have a TikTok-like app where, on the home screen, when we try to scroll the video, there is a flickering issue. While this problem was not present in the previous version (v5), it has appeared now. I have recorded a demo video demonstrating this issue, and it is attached

Reproduction

repository link

Reproduction

Steps to reproduce this bug are: Swipable videos like TikTok, and swiping the video, a flicker will appear. like when we swipe to video, the first frame is small having black spaces, then suddenly remove black spaces, goes to full mode

[ZakirBangash]

v6 with flickering issue

Flickering_issue.mp4

*v5 with smooth scroll

v5-no_flickering.mp4

[ZakirBangash]

@KrzysztofMoch @freeboub You guys are doing a really good job, Thank you for your contribution, the latest v6 has made our lives easier, and only a few issues currently we are facing, Let me know if you need anything else from my end 🙌

[tdammy92]

@ZakirBangash mind if we connect, working on somthing similar.

[ZakirBangash]

Yeah sure Let's connect

[MdAbubakar]

@ZakirBangash You can use the react-native-video@6.0.0-alpha.11 this solves for me.

Now I request the maintainers to fix this issue this happens when we change the video quality or change the video on the fly.
So, please fix this issue The flickering is not happening in v6.0.0-alpha.11 and I tried it in v6.0.0-beta.4 and there also the flickering happens so please do this as it's in v6.0.0-alpha.11 so this will be fixed.

Thanks in advance.

[freeboub]

In my mind (maybe I am wrong) there is no change regarding to View management between alpha.11 & next release.
Not sure where you investigated, but I think the fix shall be around shuttterView management.
I had a look, but I did find anything relevant yet ...

[freeboub]

@MdAbubakar @tdammy92 @ZakirBangash I think I have found a solution to fix this issue.
can you please test linked PR ? I tested it sucessfully with the sample, but I think this is safer to test it with a real life app !

[ZakirBangash]

@MdAbubakar @tdammy92 @ZakirBangash I think I have found a solution to fix this issue. can you please test linked PR ? I tested it sucessfully with the sample, but I think this is safer to test it with a real life app !

Thank you @freeboub for prompt attention to this matter, I think it is part of new release, Let me see it

[ZakirBangash]

Hi @freeboub I just tried the latest release @6.0.0-rc.1, which contains this PR, this time player does not even load the video

[freeboub]

@ZakirBangash can you try to revert my last change please ?

[ZakirBangash]

@freeboub I reverted the last changes related to shuttterView management and created PR, but I have verify it, then will let you know

[ZakirBangash]

@freeboub I reverted the last changes and created PR, tested it out, and the video is loading now.

[tdammy92]

@freeboub @ZakirBangash which version is more stable now , @6.0.0-rc.1 or v6.0.0-alpha.11 ?

[MdAbubakar]

@tdammy92 for this flickering issue the v6.0.0-alpha.11 is more stable.

[freeboub]

Notice this is a duplicate of #3653

[freeboub]

I just push another version of the fix, can you please test it ? Thank you

[ZakirBangash]

I will test it on Monday morning, I will let you know then, as I'm away from the keyboard atm 🙏

[ZakirBangash]

Hey @freeboub I tested it, The flickering is gone, but only the first frame of the video plays,then the rest of the frames paused, and the video frame movements stopped, but the audio is still going on, and most of the time the first frame is also not playing . Let me share the recording

[freeboub]

Please share a sample url !

[ZakirBangash]

We are using m3u8, I will share few m3u8 urls as well

Demo.mp4

[ZakirBangash]

Video URL : https://stream.mux.com/GBhY017Qx3X3PlDyQAx201Y3kTSADrOm4nMuD00YeLV602g.m3u8
thumbnail URL: https://image.mux.com/GBhY017Qx3X3PlDyQAx201Y3kTSADrOm4nMuD00YeLV602g/thumbnail.webp?time=0

[freeboub]

@ZakirBangash I am too far to peint your wall to a normal color 😆
BTW, I don't reproduce the issue with the sample ...
The video play well when switching between streams (you video included)
Can it be linked to any other props like poster ? I suppose you use it as you provided thumbnail url.
Can you please try to simplify your usage of <Video and maybe identify if another prop make the issue ?
Did you try to reproduce it with the sample included in the repo ? (the video freeze)

[ZakirBangash]

@freeboub When I remove poster prop, it works fine then, can you guide me what should I do?

i have poster prop and directly giving thumbnail URL. wondering how could i replace poster

[freeboub]

Can you please try to apply following patch locally.
It is just a test to see if it work better.

diff --git a/src/Video.tsx b/src/Video.tsx
index 7cdbc211..aebda7ee 100644
--- a/src/Video.tsx
+++ b/src/Video.tsx
@@ -130,6 +130,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           posterResizeMode && posterResizeMode !== 'none'
             ? posterResizeMode
             : 'contain',
+        opacity: 0.9,
       }),
       [posterResizeMode],
     );

[freeboub]

another solution can be to change (in the same file) how poster display is done.
Instead of hiding it when onLoad is thrown, try to move it in onReadyForDisplay callback

[Honggilseong]

I've encountered the same issue with the poster continuously showing. A simple solution I found is to add onReadyForDisplay to your Video component.
what i've done

        <Video
          onReadyForDisplay={() => {
            console.log("onReadyForDisplay");
          }} //add
          poster={poster}
          posterResizeMode="cover"
          ignoreSilentSwitch="ignore"
        />

[ZakirBangash]

@freeboub Giving onReadyForDisplay callback works, we just need to give onReadyForDisplay an empty callback, and then it works.

[freeboub]

@ZakirBangash This is a very good clue to understand the issue, I was able to reproduce it with the sample now !
I just push a patch to fix it !
Notice that you can keep the onReadyForDisplay patch to continue using 6.0.0-RC.1 or 6.0.0-RC.2
In fact the poster stayed displayed, it is not the first frame of the video !

[rayhanmhd123]

@freeboub Giving onReadyForDisplay callback works, we just need to give onReadyForDisplay an empty callback, and then it works.

@ZakirBangash Can you explain the process of creating a poster using the ‘updateThumbnailWith0Frame’ method?