Mehrere HTML5-Videos synchronisieren

Question

Ich hoffe, dass 3 Videos gleichzeitig abgespielt werden können, wobei jeweils nur eins sichtbar ist und zwischen ihnen gewechselt werden kann. Alle müssen miteinander und mit einer Audiospur synchronisiert sein (dies kann einfach die Audiospur einer der Videodateien sein, wenn das einfacher ist).

Ich habe nur sehr pessimistische Dinge über das Halten einer gleichmäßigen und synchronisierten Framerate über zahlreiche Mediendateien gelesen, ist nahezu unmöglich. Der FPS soll sich leicht verschieben und ist unkontrollierbar. (?)

Da ich nur einen sichtbar auf einmal brauche, hoffe ich, dass dies zu meinen Gunsten sein wird, aber ich frage mich, ob es irgendwelche Verfahren für etwas der Art gibt jeder kann auf mich hinweisen. Ich suche niemanden, der irgendeinen Code für mich schreibt, nur neugierig, ob meine Forschung mich in die Irre geführt hat.

& # x270c; &

Answer 1

Es gibt leider keinen Synchronisationsmechanismus im Browser (d. H. Zeitcode/SMTPE oder ähnliches sinc), um eine perfekte Synchronisation mit verschiedenen Videoquellen zu ermöglichen.

Forcing currentTime Updates können aufgrund der Verzögerung fehlschlagen.

Um die Videoteile korrekt zu synchronisieren, müssen alle Videos von derselben Videoquelle stammen (in diesem Fall die Datei). Das Video kann vorab bearbeitet werden, sodass alle Teile, die Sie anzeigen möchten, zusammen bearbeitet werden und die Videobildoberfläche gemeinsam nutzen.

Dann einfach Leinwand (oder Clipping mit CSS) verwenden, um verschiedene Teile des Videos in verschiedenen Elementen auf der Seite zu zeigen.

Update: Proof-of-Concept Demos für jetzt entfernt, sorry. Der Inhalt der Antwort ist jedoch immer noch gültig.

Verwenden Sie ein Canvas-Element, um den "aktuellen" Teil mit der Clipfunktion drawImage() zu zeichnen. Es gibt ein bekanntes Problem in OSX, das Video als Bildquelle für drawImage() verwendet; Sie könnten eine Bildsequenz für diese Fälle vorladen.

Sie könnten eine Karte für jeden Teil aufgebaut - in diesem Beispiel werde ich HD720 verwenden als Gesamtgröße:

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

Jetzt können Sie Tasten/Wahl/Radios verwenden, um Index zu ändern, das Video zu zeigen. Die Breite und Höhe ist bekannt:

<canvas width=640 height=360></canvas> 

Und in JavaScript:

var pos = map[index]; // source rect:   Dest rect: 
ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360); 

Alles, was Sie jetzt tun müssen, ist die Zeichnung in einer Schleife zu setzen:

function render() { 
    var pos = map[index]; 
    ctx.drawImage(video, pos.x, pos.y, 640, 360, 0, 0, 640, 360); 
    requestAnimationFrame(render) 
} 

Wenn Sie möchten, Um alle Videos gleichzeitig auf den Bildschirm zu rendern, aber an verschiedenen Stellen, können Sie stattdessen einfach drawImage() aufrufen, indem Sie die gleiche Karte mit unterschiedlichen Leinwänden verwenden:

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

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

Tipp: Die Leinwand kann als das Video Teil einer anderen Größe sein.Aktualisiere einfach die letzte Breite und Höhe (dest. Rect), um die Leinwand zu füllen.

Tipp 2: Sie können mit dieser Technik auch Text oder Logos überlagern usw.