javascript – 如何完美同步两个或更多html5视频标签?

前端之家收集整理的这篇文章主要介绍了javascript – 如何完美同步两个或更多html5视频标签?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法让两个或更多(最好是三个) html5<视频>标签同时播放并完美同步.

如果我让我们说一个视频的三个图块,我希望它们作为一个大视频出现在浏览器中.他们需要完美同步.没有最小的视觉/垂直暗示它们是平铺的.

不幸的是我不能使用MediaController,因为它不够支持.

我尝试了一些训练,包括画布,但我仍然有视觉差异.有没有人有任何类似的问题/解决方案?

解决方法

免责声明:我不是视频人,但无论如何这里有一些想法.

如果他们需要绝对完美……你会同时解决几个问题:

>设备可能不够强大,无法一次获取,同步和渲染3个流.
>即使#1已经解决,设备也永远不会完全专注于您的任务.例如,它可能暂停处理流#1和流#2之间的垃圾收集 – 导致丢弃/不同步的帧.

因此,为了给自己提供完美的最佳机会,您应首先将3个视频合并到工作室中的1个垂直视频中(或使用工作室软件).

然后,您可以使用canvas context.drawImage的扩展剪切属性将每个帧分成2-3个单独的帧.

另外,缓冲你在流上获得的几帧(不言而喻!).

使用requestAnimationFrame(RAF)来控制绘图.当系统资源可用时,RAF可以很好地绘制帧,并在缺少系统资源时延迟帧.

你的结果不会很完美,但它们会同步.当系统资源不可用时,您将始终决定是丢弃还是延迟帧,但至少会同步您执行的帧.

原文链接:https://www.f2er.com/js/158413.html

猜你在找的JavaScript相关文章