我正在尝试使用 webGL 进行一些简单的图像过滤/分析。目前我正在做的是在两个不同的图像上应用一些过滤器(使用帧缓冲区)，然后将结果组合成一个图像。到目前为止我已经成功地做到了这一点，但现在我想在视频上实时做到这一点。这是我遇到一些有趣问题的地方。
如果我在 HTML 文件中定义视频，我可以同时播放它们。但是，如果我尝试在运行时在 JavaScript 中动态添加视频，我无法让它们同时播放。或者更确切地说，如果我播放一个视频，它会立即启动，但如果我尝试启动另一个视频，直到第一个视频按照我的理解完全缓冲后才会启动。所以我只播放了两个视频，时间很短(而且我还得等待很长一段时间)。
有没有办法创建新的视频元素并同时播放它们？最好我能够随意更改源并让它们同时缓冲/播放。
澄清一下，我正在使用 Chrome 和 HTML5 视频元素。而且，如果我使用低分辨率/小尺寸视频，它也可以工作。但使用高分辨率/大视频是行不通的。
最佳答案
一种解决方案是将所有视频放入一个视频中。例如，如果您有 4 个视频，则制作一个视频，其中屏幕的左上角 1/4 是视频 #1，右上角是视频 #2，左下角是视频 3#，右下角是视频 #4。
然后使用带有统一的着色器来选择要显示纹理的哪个 Angular ，或者使用预烘焙的 UV 为每个 Angular 创建一个四边形来选择要显示视频的哪个部分。
这肯定是最简单的方法。我认为没有任何其他解决方案可以同时播放 N 个视频而不会出现缓冲和其他问题。
关于javascript - 在运行时播放多个视频并更改源，无需等待浏览器/视频缓冲区，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27373033/