我需要合并多个视频流并在Javascript ReactJS中提供视频元素

我想加入2个视频，以便在客户端上获得更快的加载体验。这意味着必须加载单独的视频数据并像播放列表一样播放它们，但过渡也要平滑。

1。分别加载流，将它们分成大块，组合在一起，然后将其作为视频元素的来源。

在实验1中，我有几个问题。

i。没有for循环获取，当使用循环分别获取每个流时，我可以将单个流正确地设置为视频BUT的源，它不起作用： -我寻找一种组合视频流的方法，但发现How to use Blob URL,MediaSource or other methods to play concatenated Blobs of media fragments?。但是，它解决了编辑一个视频的问题-分割一个视频并重新加入，还提到您不能将各个块分开并组合起来并期望其播放。

在我的情况下，它有2个不同的完整视频（甚至是重复的视频文件，但来自不同的流）。看来这条路线对我的问题来说是过大了。有没有更简单的方法，也许是一个库，不能帮助我加入这些流并将其转换为Blob？

这是我的尝试。另一个困惑是循环结束后，我的自定义钩子中的chunks数组仍然为空： Codesanbox Demo 1 - Streams

2。使用画布依次绘制视频 我找到了一个可行的解决方案，并移植了它以作出反应。这是我的演示：Codesandbox Demo 2 - Canvas。我这里的问题是，这仅适用于野生动物园，但存在一些问题。在其他浏览器上根本无法使用。

Here is the original working solution，但是当我用网址替换视频源时，该示例无法很好地工作。可能是因为我的不是.mp4吗？在Original Solution on codesandbox处进行检查。相同的代码，不同的来源，它也向我显示The index is not in the allowed range.错误。

两种情况下我都做错了什么？

我想第2个问题可能是一个单独的问题，但我在同一问题下发帖。莱姆知道我是否应该分开张贴。

提前谢谢