同步多個 HTML5 視頻

Question

我希望同步播放 3 個視頻，一次只能看到一個視頻，並且可以選擇在它們之間進行切換。 所有這些都必須彼此同步，並且有一個音軌（如果更容易的話，它可以只是一個視頻文件的音軌）。

我只讀過關於在眾多媒體文件中保持穩定和同步的幀速率幾乎不可能的非常悲觀的事情。 據說 FPS 會略微變化並且無法控制。（？）

由於我一次只需要一個可見的，我希望這對我有利，但我想知道是否有任何人可以向我指出的那種東西的轉到程序。 不尋找任何人為我編寫任何代碼，只是好奇我的研究是否誤導了我。

✌ & ♡

Answer 1

不幸的是，瀏覽器中沒有同步機制（即時間碼/SMTPE 或類似的 sinc）來實現與不同視頻源的完美同步。

由於滯后，強制currentTime更新可能會適得其反。

要正確同步視頻部分，所有視頻必須來自同一視頻源（在本例中為文件）。 可以對視頻進行預編輯，以便將要顯示的所有部分一起編輯，共享視頻圖像表面。

然后簡單地使用畫布（或使用 CSS 剪輯）在頁面的不同元素中顯示視頻的不同部分。

更新：暫時刪除了概念驗證演示，抱歉。 答案的內容仍然有效。

使用畫布元素使用drawImage()剪輯功能在“當前”部分中進行繪制。 在 OSX 中使用視頻作為drawImage()圖像源存在一個已知問題； 您可以為這些情況預加載圖像序列。

您可以為每個部分設置一個地圖 - 在本例中，我將使用 HD720 作為總大小：

var map = [
        {x: 0, y:0},
        {x: 640, y:0},
        {x: 0, y:360}
    ];

現在您可以使用按鈕/選擇器/收音機來更改要顯示的視頻的索引。 寬度和高度已知：

<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)
}

如果您想同時將所有視頻渲染到屏幕上，但渲染到不同的位置，您可以使用相同的地圖調用 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)
}

提示：畫布的大小可以與視頻部分的大小不同。 只需更新最后的寬度和高度（目標。矩形）以填充畫布。

提示 2：您還可以使用此技術疊加文本或徽標等。