How to fit video poster to video player height in expo react native video player

user_9181906 0
Viewed 375

I'm using https://github.com/ihmpavel/expo-video-player this library to add video player in react native app and setting poster image to video player. as shown below:

<VideoPlayer
      videoProps={{
        resizeMode: Video.RESIZE_MODE_CONTAIN,
        source: {
          uri: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
        },
        usePoster: true,
        posterSource: {
          uri: props.thumbnail,
        },
        posterStyle: {
          width: FULL_WIDTH - 35,
          height: FULL_WIDTH - 35,
        },
      }}
      style={{
        width: FULL_WIDTH - 35,
        height: FULL_WIDTH - 35,
      }}
      defaultControlsVisible
    />

poster is displayed as below:

output

How to fit poster image in video player exactly?

react-native-video expo react-native
1 Answers

Expo video doesn't support resizeMode for posterSource so you can show an overlay while video is being loaded.

    const [status, setStatus] = React.useState({});

    const imageHeight =  FULL_WIDTH - 35;
    const renderPoster = () => {
        if(status.isLoaded){
            return null;
        }
        return (
            <ImageBackground source={{uri: props.imageUrl}} style={{height:imageHeight, zIndex:99999}} resizeMode="cover"/>
        )
    }

      <Video
                ref={video}
                source={{
                    uri: props.videoUrl,
                }}
                style={{ zIndex: -1, height: imageHeight }}
                resizeMode={"cover"}
                shouldPlay={true}
                isLooping
                useNativeControls
                onPlaybackStatusUpdate={status => setStatus(() => status)}
            >
       {renderPoster()}

   </Video>
user_198973980
Related