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

Question

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

\n

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

\n

到目前为止我已经尝试过两件事：\'

\n

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

\n

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

\n

    const videoStyle = { width: \'100%\', height: \'100%\', display: display}; \n    return (\n        <Video\n            ref={playbackObject}\n            source={{uri: source}}\n            posterSource={require(\'path/to/file\')}\n            rate={1.0}\n            volume={1.0}\n            isMuted={isMuted}\n            resizeMode="cover"\n            usePoster={true}\n            shouldPlay={shouldPlay}\n            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}\n            progressUpdateIntervalMillis={50}\n            isLooping\n            style={videoStyle}\n            posterStyle={videoStyle}\n        >\n        </Video>\n    )\n

\n

\n
2. 我\xe2\x80\x99ve还尝试使用playbackStatus来查看视频是否已加载或缓冲，并在视频加载或缓冲时有一个活动指示器，但因为我使用状态，所以存在一些滞后。
\n

\n

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

\n

const [loaded, setLoaded] = useState(false); \n\nconst _onPlaybackStatusUpdate = playbackStatus => {\n\n    if(playbackStatus.isBuffering){  \n      if(loaded){\n        setLoaded(false); \n      }\n    } else {\n      if(!loaded){\n        setLoaded(true); \n      }\n    }\n}\n\n

\n

如果loaded = true，我们不会显示活动指示器。另外，我们确实显示了一个活动指示器。这里的主要问题是存在延迟，这不是很好的用户界面。

\n

因此，考虑到这一点，人们\xe2\x80\x99s 对于处理视频加载的建议是什么？谢谢！！

\n

Answer 1

您可以做的是将 渲染<ActivityIndicator />为背景，当它完成加载资源时，它将位于视频后面（或者您可以只检查资源是否已加载 -> 可选择将其渲染在<Video />.

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

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