我希望同步播放 3 个视频,一次只能看到一个,并且可以选择在它们之间切换。所有这些都必须彼此同步,并且音轨(如果更容易的话,可以只是其中一个视频文件的音轨)。
我只读过非常悲观的文章,关于在大量媒体文件中保持稳定和同步的帧速率几乎是不可能的。 FPS 应该会轻微移动并且无法控制。(?)
因为我一次只需要一个可见的,所以我希望这对我有利,但我想知道是否有任何人可以向我指出的那种事情的任何 goto 程序。不寻找任何人为我编写任何代码,只是好奇我的研究是否误导了我。
✌ & ♡
最佳答案
不幸的是,浏览器中没有同步机制(即时间码/SMTPE 或类似的 sinc)来实现与不同视频源的完美同步。
强制 currentTime
更新可能会因延迟而适得其反。
要正确同步视频部分,所有视频必须来自相同的视频源(在本例中为文件)。视频可以预先编辑,以便您要显示的所有部分都被编辑在一起共享视频图像表面。
然后只需使用 Canvas (或使用 CSS 进行剪辑)即可在页面的不同元素中显示视频的不同部分。
更新:抱歉,目前已删除概念验证演示。答案的内容仍然有效。
使用 Canvas 元素通过 drawImage()
裁剪功能绘制“当前”部分。在 OSX 中使用视频作为 drawImage()
的图像源存在一个已知问题;您可以为这些情况预加载图像序列。
您可以为每个部分设置一个 map - 在这个例子中我将使用 HD720 作为总尺寸:
var map = [
{x: 0, y:0},
{x: 640, y:0},
{x: 0, y:360}
];
现在您可以使用按钮/选择器/ radio 来更改要显示的视频的索引。宽度和高度已知:
<canvas width=640 height=360></canvas>
在 JavaScript 中:
var pos = map[index]; // source rect: Dest rect:
ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
现在您需要做的就是将绘图放入循环中:
function render() {
var pos = map[index];
ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
requestAnimationFrame(render)
}
如果您想同时将所有视频渲染到屏幕上,但渲染到不同的位置,您可以使用同一张 map 但使用不同的 Canvas 调用 drawImage() 三次:
<div>
<canvas width="640" height="360"></canvas>
</div>
<div style="margin-left:400px">
<canvas width="640" height="360"></canvas>
</div>
<div>
<canvas width="640" height="360"></canvas>
</div>
在 JavaScript 中:
function render() {
for(var i = 0, pos; i < ctx.length; i++) {
pos = map[i];
ctx[i].drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360);
}
requestAnimationFrame(render)
}
提示: Canvas 的大小可以与视频部分不同。只需更新最后的宽度和高度 (dest.rect) 即可填充 Canvas 。
技巧 2:您还可以使用此技术叠加文本或 Logo 等。
关于javascript - 同步多个 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36374924/