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

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

этот пост-самое близкое, что я нашел во время поиска... Я попробовал как ручной тормоз, так и данные не обошли ни один из них, похоже, не изменил ситуацию:

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

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

<video controls="controls">
    <source src="/video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>
2 67
html5 video http-live-streaming large-files

2 ответа:

  1. обеспечить moov (метаданные) перед mdat (аудио/видео данных). Это также называется "Быстрый старт" или "веб оптимизация". Например, Handbrake имеет флажок "Web Optimized" и ffmpeg и avconv есть возможность вывода -movflags faststart.
  2. убедитесь, что ваш веб-сервер сообщает правильный тип контента (video/mp4).
  3. убедитесь, что ваш веб-сервер настроен на подавать запросы диапазона байтов.
  4. убедитесь, что ваш веб-сервер не применяет сжатие gzip или deflate поверх сжатия в файле mp4.

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

120

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