it-swarm.com.de

HTML5 - Wie streame ich große .mp4-Dateien?

Ich versuche, eine sehr einfache HTML5-Seite einzurichten, die ein MP4-Video mit 20 MB lädt. Es scheint, dass der Browser das gesamte Programm herunterladen muss, anstatt nur den ersten Teil des Videos abzuspielen und den Rest zu streamen.

Dieser Beitrag ist das Nächste, was ich bei der Suche gefunden habe ... Ich habe sowohl Handbremse als auch Data Go Round ausprobiert, und es schien keinen Unterschied zu machen:

Irgendwelche Ideen, wie das geht oder ob es möglich ist?

Hier ist der Code, den ich benutze:

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
73
longda
  1. Stellen Sie sicher, dass moov (Metadaten) vor mdat (Audio-/Videodaten) steht . Dies wird auch als "Schnellstart" oder "weboptimiert" bezeichnet. Zum Beispiel haben Handbremse hat ein Kontrollkästchen "Web Optimized" und ffmpeg und avconv die Ausgabeoption -movflags faststart.
  2. Stellen Sie sicher, dass Ihr Webserver den richtigen Inhaltstyp (Video/MP4) meldet.
  3. Stellen Sie sicher, dass Ihr Webserver so konfiguriert ist, dass Bytebereichsanforderungen verarbeitet werden .
  4. Stellen Sie sicher, dass Ihr Webserver keine gzip- oder deflate-Komprimierung zusätzlich zur Komprimierung in der mp4-Datei anwendet.

Sie können die von Ihrem Webserver gesendeten Header mit curl -I http://yoursite/video.mp4 Oder den Entwicklertools in Ihrem Browser überprüfen ( Chrome , Firefox ) (Seite neu laden, wenn es wird zwischengespeichert). Der HTTP Response Header sollte Content-Type: video/mp4 und Accept-Ranges: bytes und nein Inhaltscodierung: .

135
mark4o

Hier ist die Lösung, die ich zum Erstellen eines Web-API-Controllers in C # (MVC) verwendet habe, der Videodateien mit Bytebereichen (Teilanforderungen) bereitstellt. Bei Teilanforderungen kann ein Browser nur so viel Video herunterladen, wie er zum Abspielen benötigt, anstatt das gesamte Video herunterzuladen. Das macht es weitaus effizienter.

Beachten Sie, dass dies nur in neueren Versionen funktioniert.

var stream = new FileStream(videoFilename, FileMode.Open, FileAccess.Read , FileShare.Read);

var mediaType = MediaTypeHeaderValue.Parse($"video/{videoFormat}");

if (Request.Headers.Range != null)
{
    try
    {
        var partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
        partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType);

        return partialResponse;
    }
    catch (InvalidByteRangeException invalidByteRangeException)
    {
        return Request.CreateErrorResponse(invalidByteRangeException);
    }
}
else
{
    // If it is not a range request we just send the whole thing as normal
    var fullResponse = Request.CreateResponse(HttpStatusCode.OK);

    fullResponse.Content = new StreamContent(stream);
    fullResponse.Content.Headers.ContentType = mediaType;

    return fullResponse;
}
4
Chris