Lückenlose Übergang von Video zu Video mit html5

Ich bin versucht, zu erstellen eine Funktion, wo ein Benutzer ändern kann (hin und her) zwischen mehreren videos unter Beibehaltung eines einheitlichen audio. Denke, in der Lage zu beobachten, das Konzert aus verschiedenen Blickwinkeln, aber hören von einem einzigen audio. Die Probleme habe ich mit diesem feature ist, dass es keine Verzögerung zwischen den änderungen in video-oder audio nicht mehr synchron mit den videos (vor allem nach mehreren änderungen).

Habe ich versucht, zwei Methoden, die beide mit html5 nur (ich würde es vorziehen, die Verwendung von flash, obwohl ich irgendwann eine fallback), die nicht funktionierte reibungslos, obwohl je nach browser und hardware, es kann sehr nahe kommen.

Grundlegende Methoden:

Methode 1: Preloading von videos und das ändern der video-src-Pfad bei jedem Klick mit javascript

Methode 2: Erneut Vorladen des Videos und die Verwendung von mehreren tags und wechseln zwischen Ihnen mit javascript auf jeden Klick.

Ist es auf jeden Fall zu bekommen, entweder von diesen beiden Methoden, die nahtlos zusammenarbeiten, ohne eine Lücke? Soll ich mich mit einem leicht von der hand trick, wie spielen beide videos gleichzeitig für eine Sekunde, bevor er das zweite und stoppen der ersten? Kann dies gerade nicht getan werden mit html5-Player? Geht das mit flash?

Ich habe gesehen, diese Art von Frage, die ein paar mal mit video und audio mit keine klare Lösung, aber Sie waren ein paar Monate alt, und ich hoffte, dass es nun eine Lösung. Vielen Dank für die Hilfe.

  • Ich denke Methode 2 ist die nächstgelegene Sie bekommen können, habe ich versucht, das gleiche (mit HTML5-video) und erlebte eine kurze Lücke.
  • Danke. Dies ist im Grunde das, was ich landete mit aber mit einigen Ergänzungen.
InformationsquelleAutor bennygubear | 2012-03-19
  1. 6

    Lohnt sich hinzufügen, dass es möglich ist mit der MediaSource API vorgeschlagen von Google. Diese API ermöglicht es Ihnen, Futter, beliebige binäre Daten zu einem einzigen video-element, also wenn Sie Ihre video-split in Stücke, die Sie abholen können die Stücke per XHR und fügen Sie Ihre video-element, Sie werden gespielt werden, ohne Lücken.

    Derzeit implementiert nur in Chrome und Sie zu aktivieren müssen Enable Media Source API on <video> elements im chrome:flags, es zu benutzen. Auch, nur WebM-container wird zur Zeit nicht unterstützt.

    Hier ist ein Artikel über HTML5Rocks, das veranschaulicht, wie die API funktioniert: "Stream" - video mit der MediaSource API.

    Andere nützliche Artikel, die Gespräche über chunked playlist: Segmentierung WebM Video und die MediaSource API.

    Ich hoffe, dass dieser Implementierung wird angenommen und erhält breitere Medien-container-support.

    UPDATE JUN 2014 Browser-support wird langsam besser: (danke @Hugh Guiney für den Tipp)

    • Chrome Stabil
    • FF 25+ hat ein flag media.mediasource.enabled [MDN]
    • IE 11+ auf Windows 8.1 [MSDN]
    InformationsquelleAutor Dmitry Pashkevich
  2. 5

    Hast du einen besseren Weg finden, das zu tun?

    Implementiert habe ich eine doppelt gepufferte Wiedergabe über zwei video-tags.
    Man verwendet für die aktuelle Wiedergabe, und die zweite für die Vorspannung das nächste video.
    Wenn das video endet, ich "tausche" die tags:

    function visualSwap() {
    video.volume = video2.volume;
    video2.volume = 0;
    video.style.width = '300px';
    video2.style.width = '0px';
}

    Es hat einige nicht-deterministisches Verhalten, so bin ich nicht 100% zufrieden, aber es ist einen Versuch Wert...

    • Schöne erste Antwort @whadar.
    • Verwenden Sie $('#Player').prop('loop', true); für nahtlose und für einen clip. aber wenn Ihr mehr als ein video-clip Umschalten dann Google Chrome hat keine native Lösung.
    InformationsquelleAutor whadar
  3. 1

    Ändern des SRC-tag ist schnell, aber nicht gapless. Ich bin versuchen zu finden die beste Methode für einen media-player, den ich erschaffe und Vorladen des nächsten Titels und einschalten des src über "endete" hinterlässt eine Lücke von etwa 10-20ms, das klingt klein, aber es ist genug, um spürbar, vor allem mit Musik.

    Habe ich gerade getestet mit einem zweiten audio-element, das Feuer, sobald der erste audio-element endet, die über die-Veranstaltung "beendet" und, die die gleichen winzigen Spalt.

    Aussieht (ohne aufwändige hacks) gibt es nicht eine einfache(re) Weg, gapless Wiedergabe, zumindest jetzt.

    InformationsquelleAutor Enverex
  4. 0

    ist es möglich. Sie können dies überprüfen, heraus: http://evelyn-interactive.searchingforabby.com/ es ist alles in html5. Sie sind Vorausladen aller videos am Anfang und starten Sie in der gleichen Zeit. didn t hatte die Zeit noch, um zu überprüfen, wie Sie tun es genau ist, aber vielleicht hilft es, wenn Sie überprüfen Sie Ihre Skripte über firebug

    InformationsquelleAutor longi
  5. 0

    Nach vielen versuchen, habe ich am Ende mit etwas, das ähnlich zu Methode 2. Ich fand diese Webseite http://switchcam.com und im Grunde kopiert Ihr Ansatz. Ich pre-buffered-wie das video-start-Zeit näherte und dann automatisch abgespielt wie die videos, die Ausgangspunkt Treffer. Ich hatte die aktuellen videos gleichzeitig (in einem kleinen div - als UI-bonus) und konnten die Benutzer Umschalten zwischen den videos Umschalten der "main screen". Da alle videos, die spielten auf einmal, Sie könnte wählen Sie die audio-und die Lücke am Ende nicht als ein Problem.

    Leider, ich kam nie die Lösung meines Problems genau und ich bin nicht sicher, dass meine Lösung die beste Leistung, aber es funktioniert, okay, mit einer schnellen Verbindung.

    Vielen Dank für jedermanns Hilfe!

    InformationsquelleAutor bennygubear
Schreibe einen Kommentar