0

If anyone has solved it or know it in details make sure to dm me on instagram @mujtaba._2 as I am always online there anyways I have tried many things using flatlist , react-native video also ffmpeg I have faced issues installing it , is there a way to load my videos fast just like instagram reels I two to three projects with me which are highly depended on this functionality so it will be helpful . Check the code below!

 <Video
                            ref={ref => {
                                this.player = ref;
                            }}
                            // source={{ uri: videoUri }}
                            onBuffer={this.onBuffer}
                            onError={this.videoError}
                            onLoad={() => {
                                console.log('Video loaded successfully');
                                this.player.save().then(() => {
                                    console.log('Video saved to cache');
                                });
                            }}
                            style={{
                                // height: '100%',
                                // width:'100%',
                                width: Dimensions.get('window').width,
                                height: Dimensions.get('window').height
                            }}
                            preload="auto"
                            paused={isPaused}
                            source={{ uri: videoUri }}
                            resizeMode={'cover'}
                            rezize={{ width: 480, height: 650 }}
                            // maxBitRate={6000000}
                            // autoplay
                            repeat={true}
                        // loop
                        //   muted
                        // disableSeek
                        // fullscreen
                        />
                    </View>
                );
            }}
        />
Mujtaba Sarwar
  • 41
  • 4
  • I think the key to getting fast video loads is to preload as much as you possibly can. If you look at network activity in your browser, filter for mp4, you will see that they (facebook/instagram/tiktok) preload videos quite often; often loading pieces of t he next few videos while the current video is loading. – PhantomSpooks Mar 30 '23 at 20:43
  • https://www.reddit.com/r/reactnative/comments/10d277h/tiktok_video_streaming_experience_with_react/ – PhantomSpooks Mar 30 '23 at 21:07
  • _"Is there a way to load my videos fast just like Instagram Reels"_ Do you have a link to such an example page to study/advise about? **(1)** Reducing "amount of data" needed to be received per video is the only way to increase speed for starting playback. This means reducing file size through either more compression or else using a smaller resolution. **(2)** Check possible speed-up options for your video format. Not obvious if `source={{ uri: videoUri }}` is talking about an MP4 or a WebM or Other etc. _eg:_ If it is MP4 then make sure your encoder puts metadata at front (not back) of file. – VC.One Mar 31 '23 at 12:32
  • PS: @MujtabaSarwar Since you have Instagram is there anyway you can upload a test video to both IG Reels and also your own online site (a test page)? We need to see how the same video loads faster (or not) compared to your own site (regarding fixing _"projects which are highly depended on this functionality"_). I doubt your shown ReactJS code can be fixed to correct the issue of slow loading (unless it needs a re-write into using another playback system _eg:_ like using MediaSource Extensions). Right now your problem sounds like a file/server issue not a code issue. – VC.One Mar 31 '23 at 13:14
  • @VC.One Yeah I will upload on my instagram just make sure to dm me first ok I will share the entire code as well with you , if somehow we can make this work it will be a huge help for me and my team as we have to complete this functionality for 2 projects – Mujtaba Sarwar Apr 10 '23 at 07:03
  • @MujtabaSarwar I don't have/use Instagram. Anyways I've checked on Youtube so I can see now what you mean (_eg:_ it works like Tiktok or Youtube Shorts)... The Instagram blog says they make it fast by preloading images (but nothing about video speed). As a video engineer I would try (a) Not using multiple video tags. (b) Not using multiple `src` files (c) Instead using sockets (or PHP script) to continuously get the next frames to feed into one player. That would avoid slowness from initializing multiple video objects. – VC.One Apr 17 '23 at 15:44
  • @MujtabaSarwar **PS:** The "next frames" means a chunk of bytes that represents maybe 1 or 2 seconds, so only load second by second and then switch to a new input when needed (_eg:_ via a swipe action). Also what format is your videos? I'm most familiar with MPEG codecs only, so I can only advise if your files are MP4 (or where the video part is using the H264 codec). You need to know how work with MP4 bytes (finding and extracting frame bytes to feed into the player). – VC.One Apr 17 '23 at 16:08
  • @VC.One how can I contact you ? I have asked many senior developers in react native but they are not responding I am searching for this for quite a long time . This videos are uploaded in mp4 format . Now for loading video fast I think I should compress it before uploading to the database so it will load the video fast , anyways thank you for sharing your knowledge . BTW the projects is completed only the video should work like instagram/tiktok is remaining it would be really help brother .! – Mujtaba Sarwar Jun 02 '23 at 07:39

1 Answers1

0

I found a react native library that aims to reproduce Instagram's features: https://github.com/caglardurmus/react-native-insta-story

Hopefully it's helpful for your project!

If so, upvote would be highly appreciated... Thanks!! :)

Saul Lee
  • 71
  • 3