Video Component Expo

Expo SDK
1

Does anyone have an example code for adding custom controls to Expo VIdeo Component?
There is an open issue with the Video Component where if you specify useNativeControls, the video doesn’t work.

Since, I dont want to detach my app just yet, I was wondering if someone knows how to add custom controls to the Video Component.
I know how to do it using react-native-video but since it uses react-native link, I think I cant use it with Expo?
The Expo Video Api doesn’t accept the onProgress parameter, and that’s why I am unable to figure out how to add the custom controls.
Would be great if anyone can help me out with this. Thanks.

2

Hi Rahls,

Here it is how I’ve done to make custom control:

    return (
      <View style={styles.container}>
        <Video
          source={{ uri: this.props.video }}
          rate={1.0}
          volume={0.5}
          muted={false}
          resizeMode="stretch"
          shouldPlay={paused}
          isLooping={false}
          style={{ flex: 1 }}
        />
        <View style={styles.container}>
          <TouchableOpacity
            onPress={this.handleButtonPress}
            style={styles.button}
          >
            <Ionicons name={paused ? 'md-pause' : 'md-play'} size={28} color="white" />
          </TouchableOpacity>
          <TouchableOpacity
            onPress={this.handleButtonStop}
            style={styles.button}
          >
            <Ionicons name='md-square' size={28} color="white" />
          </TouchableOpacity>
        </View>
      </View>
    );

Hope so it can help you :wink:

3

Hey Speudyland. Thanks for your response. Appreciate it.
But, the issue I am having is that I cannot find the onProgress equivalent in Expo’s Video Component. I am trying to display the progress bar and I need the progress parameter.
Thanks once again for your help :slight_smile:

4

Hey,

Ah sooooorry I didn’t read well your message…Ok, so did you tried something like (at least to test):

Progressbar-video-react-native

Let us know if you find something good on the video progressbar :wink:

5

You can use the Video callback prop to receive playback status updates: https://docs.expo.io/versions/latest/sdk/video.html#callback

The format of these updates is described here: https://docs.expo.io/versions/latest/sdk/av.html#playbackstatus

6

here u guys can check the video player with play pause and mute buttons along with the progress bar which shows the progress time of the video
Hope u guys will like it thankuuu

7

I think the link is wrong.