Playing video in react-native using react-native-video

Question

I want to simply play a video in iOS and android and using react-native-video for the same. But intermittently, the video does not play, on both android and iOS. I just see a blank video.

Error on iOS:

code: -11850
domain: "AVFoundationErrorDomain"
localizedDescription: "Operation Stopped"
localizedFailureReason: "The server is not correctly configured."
localizedRecoverySuggestion: ""

Error on android:

extra: -2147483648
what: 1

I did see a lot of these issues opened by others on github, but no solutions.

Any help to resolve this would be great.

Are there any good alternatives to react-native-video?

<Video
                ref={videoRef}
                source={{ uri: 'https://www.w3schools.com/html/mov_bbb.mp4', type: 'mp4' }}
                style={styles.video}
                resizeMode="cover"
                paused={props.paused}
                muted={muted}
                repeat
                onLoad={handleLoad}
                onProgress={handleProgress}
                playInBackground={false}
                onError={videoError}
            />

Using Video as shown above.

TIA.

Sadie P · Answer 1 · 2022-09-20T20:42:54.487

I don't think this is an error with react-native-video. It looks like Apple requires HTTP servers hosting media files for iOS must support byte-range requests.

HTTP servers hosting media files for iOS must support byte-range requests, which iOS uses to perform random access in media playback. (Byte-range support is also known as content-range or partial-range support.) Most, but not all, HTTP 1.1 servers already support byte-range requests.

If you are not sure whether your media server supports byte-range requests, you can open the Terminal application in OS X and use the curl command-line tool to download a short segment from a file on the server:

curl --range 0-99 http://example.com/test.mov -o /dev/null

If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request. If it downloads the entire file, you may need to update the media server.

Source: Apple Documentation

As a hacky workaround I found that loading the video twice got the video to load. So, theoretically you could load the first video but hide it, and then show the second video where it actually loads. The downside is that I don't know how many times the video is actually downloaded and if it's bad for the end user's data usage. Edit: I think this is causing the App to crash for us.

Here are some additional threads I found helpful:

AVPlayer fails to play video sometimes

Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

Playing video in react-native using react-native-video

1 Answers1