HTML5 - Як транслювати великі файли .mp4?

Я намагаюся налаштувати дуже базову сторінку html5, яка завантажує відео у форматі .mp4 розміром 20 МБ. Здається, що браузер повинен завантажити все, а не просто відтворити першу частину відео та потокову передачу в решті.

Ця публікація - це найближче, що я знайшов під час пошуку ... Я спробував як ручне гальмо, так і дані об’їжджати.

Будь-які ідеї щодо того, як це зробити, чи це можливо?

Ось код, який я використовую:

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

1. Переконайтеся, що moov(метадані) перед mdat(аудіо / відео дані) . Це також називається "швидким запуском" або "оптимізацією роботи в Інтернеті". Наприклад, Handbrake має прапорець "Оптимізовано для Інтернету" , а ffmpeg та avconv мають опцію виводу -movflags faststart.
2. Переконайтеся, що ваш веб-сервер повідомляє про правильний тип вмісту (video / mp4).
3. Переконайтеся, що ваш веб-сервер налаштований на обслуговування запитів діапазону байтів .
4. Переконайтеся, що ваш веб-сервер не застосовує стиснення gzip або дефляцію поверх стиску у файлі mp4.

Ви можете перевірити заголовки, які надсилає ваш веб-сервер, використовуючи curl -I http://yoursite/video.mp4або використовуючи інструменти розробника у вашому браузері ( Chrome , Firefox ) (перезавантажте сторінку, якщо вона кешована). Тема відповіді HTTP повинен включати Content-Type: відео / mp4 і Accept-Ranges: байти , а не Content-Encoding: .

Ось рішення, яке я використав для створення контролера веб-API на C # (MVC), який буде обслуговувати відеофайли з діапазонами байтів (часткові запити). Часткові запити дозволяють браузеру завантажувати лише стільки відео, скільки йому потрібно для відтворення, а не завантажувати ціле відео. Це робить його набагато ефективнішим.

Зауважте, це працює лише в останніх версіях.

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