Reactjs 在此上下文中如何在缓冲(隐藏)视频和渲染视频之间切换

我有一个复杂的react应用程序来处理视频流，但这个问题可以归结为简单得多的问题.基本上，我需要使用隐藏的迪夫(不要问我为什么)"在后台"缓冲视频，同时显示当前视频.然后每隔几秒循环浏览n个视频，在当前视频播放时缓冲下一个视频.

我正在使用React，由于某种原因，这样做不起作用:

const BufferedVideoRenderer = () => {
  return (
    <>
      <VideoPlayer streamId={bufferedStreamId} style={{ display: 'none' }} />
      <VideoPlayer streamId={currentStreamId} />
    </>
  )
}

然后你会有一个useEffect挂钩，它循环并基本上将流ID设置为i和i + 1(并在结束时循环回0).这不起作用，因为ID会向前循环！你最终会得到这些状态:

// stream IDs
[123, 456, 789]

// state 1
currentStreamId === 123
bufferedStreamId === 456

// state 2
currentStreamId === 456
bufferedStreamId === 789

// state 3
currentStreamId === 789
bufferedStreamId === 123

因此，缓冲的456在状态1的第一个组件插槽中呈现，但在状态2，它在第二个组件插槽中呈现！因此系统不会重复使用缓冲组件插槽.

你如何实现这一目标？您可能可以在没有React的情况下模拟它，只需使用多姆或简单的函数即可.

我甚至不确定各州会是什么样子，似乎你会以某种方式这样做:

// stream IDs
[123, 456, 789]

// state 1, show current
currentStreamId === 123
bufferedStreamId === 456

// state 2, show buffered now
currentStreamId === 789
bufferedStreamId === 456 // keep this one in its slot

// state 2, show current now
currentStreamId === 789
bufferedStreamId === 123 // update this one now

所以看起来您需要在显示的插槽之间来回切换，同时一次只更新one个ID..

你将如何实现这一目标？

我try 了两种状态并来回切换，结果显示了这一点.