How to customised useNativeControls in expo-av Video

user_6945218 0
Viewed 452

I want to three icons, two for video playing speed control and another one for video resolution change. Is there any way to add this kind of buttons ??

Here is my player:

            <Video
                key={videoId}
                ref={video}
                style={styles.videoPlayer}
                source={{
                  uri: videofiles?.link,
                }}
                rate={1.0}
                posterSource={{ uri: thumbnail }}
                usePoster={!isActivity}
                useNativeControls
                resizeMode={Video.RESIZE_MODE_CONTAIN}
                isLooping
                onPlaybackStatusUpdate={status => {
                  statusChangeEvent(status);
                }}
                onFullscreenUpdate={onFullscreenUpdate}
              />

expo react-native
1 Answers

You can not modify your native controller. But you can use a hacky solution by using Pressable. You have to wrap your video component with Pressable. And after that, you can show your customize modal. Here is an Example:

<Pressable>
 <>
  <Video
    ...
    ...
  />
  //your customize modal
  ...
  ...
 </>
</Pressable>
user_101282760
Related