在运行时播放多个视频并更改源，而无需等待浏览器/视频缓冲区

Playing multiple video's and changing source during runtime without waiting for browser/video buffer

本文关键字：等待视频缓冲区浏览器播放运行时视频更新时间：2023-09-26

我正在使用webGL进行一些简单的图像过滤器/分析。目前我正在做的是在两个不同的图像上应用一些过滤器(使用帧缓冲区(，然后将结果组合成一个图像。到目前为止，我已经成功地完成了这项工作，但现在我想在视频上实时做到这一点。这就是我遇到一些有趣问题的地方。

如果我在HTML文件中定义视频，我可以同时播放它们。但是，如果我尝试在运行时在javascript中动态添加视频，则无法同时播放它们。或者更确切地说，如果我播放一个视频，它会立即开始，但如果我尝试启动另一个视频，它不会开始，直到第一个视频完全缓冲，据我所知。所以我只有两个视频播放了很短的时间(而且我必须等待一段时间(。

有没有办法创建新的视频元素并同时播放它们？最好我能够随意更改源代码并同时让它们缓冲/播放。

澄清一下，我使用的是Chrome和HTML5视频元素。而且，如果我习惯于低分辨率/小尺寸视频，它可以工作。但是使用更高的分辨率/大视频是行不通的。

一种解决方案是将所有视频放在一个视频中。例如，如果您有

4 个视频，那么制作一个视频，其中屏幕左上角的 1/4 是视频 #1，右上角是视频 #2，左下角是视频 3#，右下角是视频 #4。然后，使用

带有统一的着色器来选择要显示的纹理的哪个角，或者使用预烘焙的UV为每个角制作一个四边形，以选择要显示的视频部分。

这当然是最简单的方法。我认为没有任何其他解决方案可以同时播放N个视频而不会出现缓冲和其他问题。