HTML5 - jak przesyłać strumieniowo duże pliki. mp4?

Próbuję skonfigurować bardzo podstawową stronę html5, która ładuje. mp4 wideo, które jest 20MB. Wygląda na to, że przeglądarka musi pobrać całość, a nie tylko odtwarzać pierwszą część wideo i przesyłać strumieniowo resztę.

Ten post jest najbliższą rzeczą, jaką znalazłem podczas wyszukiwania... Próbowałem zarówno Hamulca ręcznego, jak i danych nie widać różnicy:

Jakieś pomysły jak to zrobić lub czy to możliwe?

Oto kod I ' m użycie: 

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
Author: Community, 2012-04-26
Source

2 answers

  1. Upewnij się, że moov (metadane) znajduje się przed mdat (Dane audio/wideo) . Jest to również nazywane "szybkim startem" lub "zoptymalizowanym Internetem". Na przykład, hamulec ręczny ma pole wyboru "Web Optimized" , a ffmpeg i avconv mają opcję wyjścia -movflags faststart.
  2. Upewnij się, że serwer WWW zgłasza prawidłowy typ treści (wideo / mp4).
  3. upewnij się, że serwer WWW jest skonfigurowany do obsługi żądań zakresu bajtów.
  4. Upewnij się, że Twój serwer WWW nie stosuje kompresji gzip ani deflate oprócz kompresji w pliku mp4.

Możesz sprawdzić nagłówki wysyłane przez serwer WWW za pomocą curl -I http://yoursite/video.mp4 lub za pomocą narzędzi programistycznych w przeglądarce (Chrome, Firefox ) (przeładuj stronę, jeśli jest buforowana). Nagłówek odpowiedzi HTTP powinien zawierać Content-Type: video/mp4 i Accept-Ranges: bytes oraz no Content-Encoding: .

 120
Author: mark4o,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:43

Oto rozwiązanie, którego użyłem do stworzenia kontrolera Web API w C# (MVC), który będzie obsługiwał pliki wideo z zakresami bajtów (częściowe żądania). Częściowe żądania pozwalają przeglądarce pobrać tylko tyle wideo, ile trzeba odtworzyć, zamiast pobierać cały film. To sprawia, że jest o wiele bardziej wydajny.

Uwaga To działa tylko w najnowszych wersjach.

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;
}
 3
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-12 12:13:54