有没有办法让两个或更多(最好是三个)
html5<视频>标签同时播放并完美同步.
如果我让我们说一个视频的三个图块,我希望它们作为一个大视频出现在浏览器中.他们需要完美同步.没有最小的视觉/垂直暗示它们是平铺的.
不幸的是我不能使用MediaController,因为它不够支持.
解决方法
免责声明:我不是视频人,但无论如何这里有一些想法.
如果他们需要绝对完美……你会同时解决几个问题:
>设备可能不够强大,无法一次获取,同步和渲染3个流.
>即使#1已经解决,设备也永远不会完全专注于您的任务.例如,它可能暂停处理流#1和流#2之间的垃圾收集 – 导致丢弃/不同步的帧.
因此,为了给自己提供完美的最佳机会,您应首先将3个视频合并到工作室中的1个垂直视频中(或使用工作室软件).
然后,您可以使用canvas context.drawImage的扩展剪切属性将每个帧分成2-3个单独的帧.
另外,缓冲你在流上获得的几帧(不言而喻!).
使用requestAnimationFrame(RAF)来控制绘图.当系统资源可用时,RAF可以很好地绘制帧,并在缺少系统资源时延迟帧.
你的结果不会很完美,但它们会同步.当系统资源不可用时,您将始终决定是丢弃还是延迟帧,但至少会同步您执行的帧.