如何将视频海报适合视频播放器高度在Expo React本地视频播放器中

Question

我正在使用 https://github.com/github.com/ihmpavel/expo/expo-video-player 此库在React Native应用中添加视频播放器并将海报图像设置为视频播放器。如下所示：

<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
    />

显示如下：

输出

海报 ？

Answer 1

只需这样做：

posterStyle={{
  resizeMode: 'cover',
}}

Answer 2

博览会视频不支持recizemode postersource，因此您可以在加载视频时显示覆盖层。

    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>

Answer 3

<Video
              source={{ uri: '' }}
              resizeMode={ResizeMode.CONTAIN}
              style={styles.video}
              isLooping={true}
              shouldPlay={true}
              isMuted={true}
              usePoster={true}
              PosterComponent={() => {
                return (
                  <ImageBackground
                    style={styles.loadingImage}
                    source={require('loadingImage.png')}
                    resizeMode={ResizeMode.CONTAIN}
                  />
                );
              }}>
            </Video>