如何在这种情况下在缓冲（隐藏）视频和渲染视频之间切换？

Question

我有一个处理视频流的复杂反应应用程序，但这个问题可以归结为更简单的问题。基本上，我需要使用隐藏的 div “在后台”缓冲视频（不要问我为什么），同时显示当前视频。然后，它每隔几秒循环播放

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 的情况下模拟它，只需使用 DOM 或一个简单的函数。

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

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

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

你会如何实现这个目标？

我尝试有两种状态并来回切换显示的状态。

Answer 1

当您更改可见播放器中的流 ID 时，它不会神奇地从不可见播放器传输预缓冲数据。

您需要将偶数索引的streamIds一致性分配给一个播放器，将奇数索引的streamIds一致地分配给另一个播放器，然后切换可见性以确定用户看到哪个播放器。如果你想用谷歌搜索它，该技术通常被称为“双缓冲”。

假设您有一个

useState

变量

i

，它是当前正在播放的视频的索引。然后你可以这样做：

if ((i&1) == 0) {
    // even-numbered video playing
    return (
       <>
           <VideoPlayer streamId={streams[i]}/>
           <VideoPlayer streamId={streams[i+1]}  style={{ display: 'none' }}/>
       </>
    );
} else {
    // odd-numbered video playing
    return (
       <>
           <VideoPlayer streamId={streams[i+1]}  style={{ display: 'none' }}/>
           <VideoPlayer streamId={streams[i]}/>
       </>
    );
}

请注意，由于新元素与旧元素的匹配方式，第一个播放器始终是同一个视频播放器实例，第二个播放器始终是第二个播放器实例，即使我们切换返回它们的分支也是如此。