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 Ganze 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, da keiner der beiden einen Unterschied zu machen schien:

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

Hier ist der Code, den ich verwende:

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

1. Stellen Sie sicher, dass sich die moov(Metadaten) vor den mdat(Audio- / Videodaten) befinden . Dies wird auch als "Schnellstart" oder "weboptimiert" bezeichnet. Zum Beispiel hat Handbrake ein Kontrollkästchen "Web Optimized" und ffmpeg und avconv haben die Ausgabeoption -movflags faststart.
2. Stellen Sie sicher, dass Ihr Webserver den richtigen Inhaltstyp (Video / MP4) meldet.
3. Stellen Sie sicher, dass Ihr Webserver für die Bearbeitung von Bytebereichsanforderungen konfiguriert ist .
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 curl -I http://yoursite/video.mp4mithilfe der Entwicklertools in Ihrem Browser ( Chrome , Firefox ) überprüfen (laden Sie die Seite neu, wenn sie zwischengespeichert ist). Der HTTP-Antwortheader sollte Inhaltstyp: Video / MP4 und Akzeptanzbereiche: Byte und keine Inhaltskodierung enthalten : .

Hier ist die Lösung, mit der ich einen Web-API-Controller in C # (MVC) erstellt habe, der Videodateien mit Byte-Bereichen (Teilanforderungen) bereitstellt. Bei Teilanforderungen kann ein Browser nur so viel Video herunterladen, wie abgespielt werden muss, anstatt das gesamte Video herunterzuladen. Dies 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;
}