react-native - 在 Expo React Native 应用程序上加载视频时指示加载的最佳方式是什么？

Question

我想问一下在 Expo/React Native 上处理视频加载的最佳方式是什么。

Expo 有很好的关于处理视频/音频的视频和 AV 组件的文档: https://docs.expo.io/versions/latest/sdk/video/ https://docs.expo.io/versions/latest/sdk/av/

到目前为止我已经尝试了两件事:'

1. 在视频组件中使用 posterSource。这里的问题是海报图片的格式不正确。

这是我的视频组件的样子:

    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. 我也尝试过使用 playbackStatus 来查看视频是否已加载或正在缓冲，并在视频已加载或正在缓冲时有一个事件指示器，但因为我使用状态，所以存在一些延迟。

我对 (2) 的实现如下所示:

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

const _onPlaybackStatusUpdate = playbackStatus => {

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

如果 loaded = true，我们不会显示事件指示器。否则，我们会显示一个事件指示器。这里的主要问题是存在延迟，这不是很好的 UI。

考虑到这一点，人们对处理视频加载的建议是什么？谢谢!!

Answer 1

你可以做的是渲染一个 <ActivityIndicator />作为背景，当它完成加载 Assets 时，它将位于视频后面(或者您可以只检查 Assets 是否已加载 -> 可选择在 <Video /> 内渲染它。

<Video
  ref={handleVideoRef}
>
  <ActivityIndicator size="large" />
</Video>

  const handleVideoRef = async component => {
    const playbackObject = component;
    if (playbackObject) {
      await playbackObject.loadAsync(
        { uri: currentVideoURI },
      );
    }
  };