我需要组合多个视频流，并在Javascript JS中提供一个视频元素

我有两个视频，我想加入作为一个有更快的加载体验的客户端。这意味着必须加载单独的视频数据，并像播放列表一样播放，但也要平滑过渡

我有两种方法

1。分别加载流，将其分割成块，合并并将其作为视频元素的源提供。

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

一,。如果没有for looped fetch，我可以正确地将单个流设置为视频源，但是当使用循环单独获取每个流时，它不起作用： -我寻找一种结合视频流的方法，我发现了。然而，它解决了编辑一个视频的问题——分割一个视频，然后重新加入，同时还提到，你不能只是分割块，然后组合，然后期待它播放

在我的例子中，它有两个不同的完整视频（即使是重复的视频文件，但来自不同的流）。看来这条路线对我的问题来说是一种过分的手段。有没有一种更简单的方法，也许是一个库，可以帮助我连接这些流并将它们转换为blob

这是我的尝试。另一个困惑是，在循环完成运行后，自定义挂钩中的chunks数组仍然为空：

2。使用画布按顺序一个接一个地绘制视频 我找到了一个有效的解决方案，并将其移植到反应器中。这是我的演示：。我这里的问题是，这只适用于safari，但存在一些问题。它在其他浏览器上根本不起作用

但当我用我的URL替换视频源时，同样的例子不起作用。可能是因为我的不是？在这里查看。相同的代码，不同的源代码，它还显示一个

索引不在允许的范围内。

错误

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

我想第二个问题可能是一个单独的问题，但我在这里发布的是同一个问题。让我知道我是否应该分开邮寄

---

提前感谢

您基本上希望在第二次播放结束时播放第一个视频？是的，但要进行无缝过渡。第二个视频应该在第一次播放结束之前就已经加载了您基本上想在第二次播放结束时播放第一个视频？是的，但是要有一个不可见的过渡。第二个视频应该在第一个视频结束之前加载