HTML5 - Wie streamen große .mp4-Dateien?

Ich versuche zu setup eine sehr einfache html5-Seite, die lädt Sie ein .mp4-video ist 20MB. Es wird angezeigt, dass der browser herunterladen muss die ganze Sache eher als nur spielen der erste Teil der video-und streaming im rest.

Dieser Beitrag ist die nächste Sache, die ich gefunden habe bei der Suche... ich habe versucht, sowohl Hand-Bremse und Daten Gehen herum, weder schien einen Unterschied zu machen:

Irgendwelche Ideen auf, wie dies zu tun, oder wenn 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>

InformationsquelleAutor der Frage longda | 2012-04-26

  1. 114
    1. Sicherstellen, dass die moov (Metadaten) ist vor der mdat (audio/video Daten). Dies wird auch als "fast start" oder "web-optimiert". Zum Beispiel, Handbrake hat ein "Web-Optimiert" aktivieren, und ffmpeg und avconv haben die option output -movflags faststart.
    2. Sicherzustellen, dass Ihre web-server reporting den richtigen Content-Type (video/mp4).
    3. Sicherzustellen, dass Ihre web-server so konfiguriert ist, um zu dienen byte-range-Anfragen.
    4. Sicherzustellen, dass Ihre web-server ist nicht anzuwenden, gzip-oder deflate-Komprimierung auf der Oberseite der Kompression in der mp4-Datei.

    Können Sie die Header gesendet werden sollen, die von Ihrem web-server mit curl -I http://yoursite/video.mp4 oder unter Verwendung der Entwickler-tools in Ihrem browser (Chrome, Firefox) (die Seite neu laden, wenn es zwischengespeichert). Der HTTP-Antwort-Header enthalten sollte Content-Type: video/mp4 und Accept-Ranges: bytes, und keine Content-Encoding:.

    InformationsquelleAutor der Antwort mark4o

  2. 3

    Hier ist die Lösung, die ich verwendet, um eine Web-API-Controller in C# (MVC) dienen video-Dateien mit Byte-Bereiche (teilweise Anfragen). Teilweise Anforderungen ermöglichen einen browser, um nur so viel herunterladen des Videos, wie es spielen muss, anstatt das herunterladen der gesamten video. Dies macht es viel effizienter.

    Hinweis: dieses funktioniert nur in neueren Versionen.

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

    InformationsquelleAutor der Antwort Chris

Schreibe einen Kommentar