What is the best way to indicate loading while a video is loading in app?

Please provide the following:

  1. SDK Version: 38
  2. Platforms(Android/iOS/web/all): iOS and Android

I wanted to ask what would be the best way to handle loading for videos on Expo / React Native.

Expo has good documentation on the Video and AV components to handle video / audio:
https://docs.expo.io/versions/latest/sdk/video/
https://docs.expo.io/versions/latest/sdk/av/

I’ve tried two things so far: ’

  1. Using posterSource in a Video component. The problem here is that the poster image doesn’t format properly.

This is what my Video component looks like:

    const videoStyle = { width: '100%', height: '100%', display: display}; 
    return (
        <Video
            ref={playbackObject}
            source={{uri: source}}
            posterSource={require('path/to/file')}
            rate={1.0}
            volume={1.0}
            isMuted={isMuted}
            resizeMode="cover"
            usePoster={true}
            shouldPlay={shouldPlay}
            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}
            progressUpdateIntervalMillis={50}
            isLooping
            style={videoStyle}
            posterStyle={videoStyle}
        >
        </Video>
    )
  1. I’ve also tried using playbackStatus to see if the video is loaded or buffering and have an activity indicator when the video is loaded or buffering, but because I use states, there is some lag.

My implementation for (2) looks like this:

const [loaded, setLoaded] = useState(false); 

const _onPlaybackStatusUpdate = playbackStatus => {

    if(playbackStatus.isBuffering){  
      if(loaded){
        setLoaded(false); 
      }
    } else {
      if(!loaded){
        setLoaded(true); 
      }
    }
}

If loaded = true, we do not show an activity indicator. Else, we do show an activity indicator. The main problem here is there is a lag, which is not great UI.

So with that in mind, what would be people’s recommendation of handling loading for videos? Thanks!!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.