Anzeige des gleichen Videos in mehreren <video> Tags

Question

Ich habe ein Video (nennen wir es Composite-Video) von mehreren anderen Videos mit einem Muster zusammengefügt. Zum Beispiel finden Sie in der Screenshot der folgenden Videos, komponiert von zwei und vier weiteren Videos, die jeweils:

aber ich muß es anders angezeigt: Ein Haupt, größer, Video und N-1 Video Thumbnails, wobei N die Gesamtzahl der Videos ist. Hier ist diese andere Anzeige zu den Videos entsprechenden oben:

zum Hauptdisplay ich eine Kombination aus HTML und CSS bin mit dem Video positioniere ich in dem größeren div will. Es läuft reibungslos, unabhängig von der Anzahl der Videos in den Composite-Videos.

die Thumbnails anzuzeigen, verwende ich <canvas> die Teile zu zeichnen ich will:

video.addEventListener('play', function() { 
    (function loop() { 
    drawThumbnails(); 
    setTimeout(loop, 1000/30); // drawing at 30fps 
    })(); 
}, false); 

function drawThumbnails() { 
    for (var i = thumbs.length - 1; i >= 0; i--) { 
    drawThumbnail(thumbs[i]); 
    }; 
} 

function drawThumbnail(thumb) { 
    var thumbNumber = Number(thumb.id.match(/\d+/g)); 
    var canvasContext = thumb.getContext('2d'); 
    var thumbCoordinates = getVideoCoordinates(thumbNumber); 
    var srcX = thumbCoordinates.column * videoWidth; 
    var srcY = thumbCoordinates.row * videoHeight; 

    canvasContext.drawImage(
     video, srcX, srcY, videoWidth, videoHeight, // Source 
     0, 0, thumb.width, thumb.height); // Destination 
} 

Es war gut für 3 (manchmal 4) Videos arbeiten. Wenn jedoch die Anzahl der Videos im Composite-Video zunimmt, beginnen die Videos in den Miniaturansichten zu frieren und laufen nicht reibungslos. Dies passiert wahrscheinlich, weil zu viele Bildverarbeitungsvorgänge gleichzeitig ausgeführt werden.

Ich denke, der richtige Weg, um es zu tun ist, mit <video> und Methoden speziell für Videos, nicht für Bilder. Ich habe auch versucht, das gleiche src in den mehrerenTags (eines für jedes Thumbnail) zu verwenden und eventListeners hinzuzufügen, um die Videos in den Thumbnails abzuspielen/pausieren, sobald das Hauptvideo gespielt/pausiert wird. Das ist nicht sehr effizient, insbesondere weil Videos manchmal beim Suchen/Puffern nicht mehr synchron sind.

Gibt es eine Möglichkeit, nur ein Video in mehreren <video> Tags zu verwenden und nur eines davon (in meinem Fall das mit dem Hauptvideo) zu verwenden, um alle anderen zu steuern? Falls das nicht möglich ist, gibt es einen alternativen Ansatz für mein Problem?

Vielen Dank,

P. S. Mehrere getrennte Videos zu haben, ist in meiner Situation keine Option. Es würde sehr lange dauern, das Eingangsvideo zu verarbeiten und es in mehrere Videos aufzuteilen.

Answer 1

Sie können auf das gleiche Video über mehrere Videoelemente verweisen. Das Klonen des Originals und das Anhängen dieser Bilder als Miniaturbilder können die Langeweile mildern.

Iterieren über die Thumbnails und .play() Sie sollten in Ordnung sein, solange Sie ihre currentTime mit der des Hauptvideos vor dem Abspielen einstellen, um Drift zu minimieren. Es kann notwendig sein, auf canplay zu warten, um auf das Hauptvideo und/oder die Vorschaubilder zu schießen, abhängig von der genauen Erfahrung, die Sie liefern möchten.

Wenn jedes Thumbnail einen übergeordneten Container erhält, können Sie möglicherweise das Videoelement, das als Thumbnail dient, so positionieren, dass nur der Teil des Videos sichtbar ist, den Sie sehen möchten.

FWIW, könnte für Sie als Leistungsoptimierung von Interesse sein, wenn es der Compositing-Leistung hilft.

Sie müssen die Wiedergabe/Pause aller Videoelemente manuell koordinieren, aber das sollte einfach genug sein, um mit einem Fassadenobjekt zu arbeiten, das die Wiedergabepause aller "verknüpften" Videoelemente behandelt.

Answer 2

Wie ist das Format des Hauptvideos? Ist es eine auf Anfrage mp4/webm Datei?

Wenn Sie immer noch mit Ihrem Ansatz von Rahmen greifen und malen wollen, aber mit Leistungsproblemen konfrontiert sind, ziehen Sie in Erwägung, Webarbeiter für die schweren Aufgaben zu verwenden. Here können Sie einige Beispiele für Video-/Leinwandmanipulationen mit Web-Mitarbeitern finden.

Answer 3

Ich weiß, ich poste spät, und Sie haben möglicherweise bereits eine Antwort gefunden. Wenn jedoch jemand anderes auf diese Frage stößt, hier ist meine Antwort:

Sie können mehrere Videoelemente mit der gleichen Quelle verwenden. Der Weg dazu ist mit CSS.

.wrapper { 
    height: /*height of one video*/; 
    width: /*width of one video*/; 
    overflow: hidden; 
} 
video { 
    position: relative; 
    top: /*height offset*/; 
    left: /*width offset*/; 
} 

Und HTML

<div class="wrapper"> 
    <video src="myvideo.mp4"></video> 
</div> 

Also, wenn ich die rechte obere Video tat, und jeder war 250px von 250px, würde ich meine Wrapper height und width-250px und mein Video eingestellt top zu 0px und mein Video left zu 250px