Video loads very very late

[Thanmai-C]

Hi, Firstly great work @itsnubix. I am using the latest version of RN video controls and RN 0.46.4. Using the component that u provide except some UI icons changes, but the video loads very very late. A 20sec video takes almost 5 mins to load and play, and even then it doesn't play completely. It stops(or may be buffering) after some seconds of playing. And sometimes resumes,and sometimes not. (I have tried playing that video link on web it plays well) Don't know why this issue.

Will be really very greatful if u can help and resolve the issue. Please help.

Thank you

[kylemilloy]

Sounds like a connection speed thing. Have you tried using a video loaded from disk?

[kylemilloy]

Sounds like a connection issue. Have you tried loading a local video? What video are you loading? From where?

[Thanmai-C]

I am loading the uri link from a server, i dont think its network issue since i checked it on wifi only Didn't try loading a local video. My code:

I checked it on my Android Emulator Nexus 5X(Android 7.0) and also on my personal device(Android 7.1). Can u check and help resolve it?

[kylemilloy]

Wifi is one part but if the server you’re pulling it from is slow then it’ll bottleneck there. What’s the URL to the file yours trying to access? Does it load slow in the browser too?

[Thanmai-C]

URL is same as in the code snippet above, u can check. It loads fast in the browser.

[kylemilloy]

Have you tried a local file yet?

[Thanmai-C]

how to use a local file instead of url ?

Is the loading late because it is a http url link?

[kylemilloy]

Back at my desk now so I can properly address this. Yes. Using a local file would be done like this:

<VideoPlayer source={ require('../assets/video.mp4') } navigator={ this.props.navigator } />

[Thanmai-C]

I tried using a local file, it works pretty well. But little delay some times. And the seekbar on moving goes back and comes to the place dragged(but video plays correctly). Any solution?

[kylemilloy]

Okay...let's try some stuff here to figure out where the problem is stemming from.

1.) You should already have RN Video installed as it's a dep of this package so check out the documentation on their git and try using just a video element without any controls to see if the issues persist. I'd also recommend running some quick speed tests to confirm that it's not a network issue. Should look something like....

import Video from 'react-native-video';

// ...

render() {
    return (
        <Video source={ require('../assets/video.mp4') } />
    );
}

2.) Regarding the seek bar jumping back. If what you're talking about is what I think you're talking about then it sounds like your issue is the onProgress event firing before the video has had a chance to update its location on the video. Try modifying the progressUpdateInterval prop on the <VideoPlayer> element...by default it fires every 250ms. Try upping this timing to half a second or even a full second like so:

<VideoPlayer progressUpdateInterval={1000} />

The number is in milliseconds and accepts decimals.

[Thanmai-C]

Regarding the seekbar, i see in the RN Video documentation that progressUpdateInterval is only for iOS, how about in Andorid? And in RN Video documentation i see methods to seek and presentfullscreenPlayer. But i am not able to use it with VideoPlayer as it has no effect,why ? this.player.ref.seek(0) ; this.player.ref.presentFullscreenPlayer()

[Thanmai-C]

When seeking sometimes seek handle hops back to original position #9 , issues seems to exist still.

[kylemilloy]

You'll need to establish a reference to the <VideoPlayer> first before you can use ref. Something like:

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.controls = VideoPlayer;
    }

    render() {
        return <VideoPlayer ref={ controls => this.controls = controls} ... />;
    }
}

Then you can use the seekTo method on the VideoPlayer class like so: this.ref.seekTo(0)or access the <Video> element directly: this.controls.player.ref or this.controls.player.ref.seek(0)

Keep in mind that presentFullscreenPlayer is iOS only

[Thanmai-C]

k will check and let u know. When seeking sometimes seek handle hops back to original position and then moves back #9 , issues seems to exist still. I find this more often when the network speed is bit slow. As you told progressUpdateInterval is an iOS property ONLY according to react native video git docs.

[fendorio]

@Thanmai-C When the video is being loaded in your app, are there many/any other network requests being sent off? Seems like it could be related to "other stuff" your app is doing, hard to disregard atm with what you've said.

If so, have you tried loading your video in a plain old demo project, i.e. single component view, with just the video player component referenced?

@kylemilloy Should close this issue, it's become more of a discussion thread, your thoughts?

[kylemilloy]

Yeah that sounds about right....closed.

[WaqarAmjad345]

I am facing the same issue but I can't use local video because I have a dynamic video from Vimeo server link, it takes some time to load is there any way to buffer the video before the video is playing or any other way

[sabeelmuttil]

I also have the same issue, anyone fixed this?

@kylemilloy