HTML5 - Как передавать большие файлы .mp4?

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

Этот пост - это самая близкая вещь, которую я нашел во время поиска... Я попробовал как Hand Brake, так и Data Go Round, ни один из них не изменил:

Любые идеи о том, как это сделать или если это возможно?

Вот код, который я использую:

<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.
Убедитесь, что ваш веб-сервер сообщает правильный контент-тип (видео/mp4).
Убедитесь, что ваш веб-сервер настроен для обслуживания запросов диапазона байтов.
Убедитесь, что ваш веб-сервер не применяет gzip или сжимает сжатие поверх сжатия в файле mp4.

Вы можете проверить заголовки, отправляемые вашим веб-сервером, с помощью curl -I http://yoursite/video.mp4 или с помощью инструментов разработчика в вашем браузере ( Chrome, Firefox) (перезагрузите страницу, если она кэширована). Заголовок HTTP-ответа должен включать Content-Type: video/mp4 и Accept-Ranges: bytes и Content-Encoding:... p >

Ответ 2

Вот решение, которое я использовал для создания контроллера веб-API в С# (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;
}