我正在玩使用webGL做一些简单的图像过滤/分析。目前,我正在做的是在两个不同的图像上应用一些过滤器(使用帧缓冲器),然后将结果合并到一个图像中。到目前为止,我已经取得了成功,但现在我想在视频上实时完成。这是我遇到一些有趣问题的地方。
如果我在HTML文件中定义视频,我可以同时播放它们。但是如果我尝试在运行时在javascript中动态添加视频,我就无法同时播放它们。或者更确切地说,如果我播放一个视频,它会立即启动,但如果我尝试启动另一个视频,它就会启动,直到第一个视频完全缓冲,因为我理解它。所以我只有两个视频播放很短的时间(而且我还要等待一段时间)。
有没有办法创建新的视频元素并同时播放它们?我最好能够随意更改来源并同时缓冲/播放。
澄清我使用Chrome和HTML5视频元素。而且,如果我使用低分辨率/小尺寸的视频,它也能正常工作。但是使用更高分辨率/大视频并不起作用。
答案 0 :(得分:1)
一种解决方案是将您的所有视频放在一个视频中。例如,如果你有4个视频,那么制作一个视频,其中屏幕的左上角1/4是视频#1,右上角是视频#2,左下角是视频3#,右下角是视频#4。
然后使用带有制服的着色器来选择要显示的纹理的哪个角,或者使用预先烘焙的UV为每个角制作四边形以选择要显示的视频的哪个部分。
这肯定是最简单的方法。我认为没有任何其他解决方案可以在没有缓冲和其他问题的情况下同时播放N个视频。