vídeo - HTML5: cómo transmitir archivos.mp4 de gran tamaño

pasar de webm a mp4

Question

Estoy intentando configurar una página html5 muy básica que cargue un video .mp4 de 20MB. Parece que el navegador necesita descargar todo en lugar de solo reproducir la primera parte del video y la transmisión en el resto.

Esta publicación es lo más parecido que encontré mientras buscaba ... Intenté con Hand Brake y Data Go Round, pero ninguno pareció marcar la diferencia:

¿Alguna idea sobre cómo hacer esto o si es posible?

Aquí está el código que estoy usando:

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

Answer 1

1. Asegúrese de que el moov (metadata) esté antes del mdat (datos de audio / video) . Esto también se llama "inicio rápido" o "optimizado para la web". Por ejemplo, Handbrake tiene una casilla de verificación "Web Optimized" , y ffmpeg y avconv tienen la opción de salida -movflags faststart .
2. Asegúrese de que su servidor web esté informando sobre el tipo de contenido correcto (video / mp4).
3. Asegúrese de que su servidor web esté configurado para atender solicitudes de rango de bytes .
4. Asegúrese de que su servidor web no esté aplicando compresión gzip o desinflado sobre la compresión en el archivo mp4.

Puede verificar los encabezados enviados por su servidor web usando curl -I http://yoursite/video.mp4 o usando las herramientas de desarrollador en su navegador ( Chrome , Firefox ) (vuelva a cargar la página si está en caché). El encabezado de respuesta HTTP debe incluir Content-Type: video / mp4 y Accept-Ranges: bytes , y no Content-Encoding:.

Answer 2

Aquí está la solución que utilicé para crear un controlador de API web en C # (MVC) que servirá archivos de video con rangos de bytes (solicitudes parciales). Las solicitudes parciales permiten que un navegador solo descargue la mayor cantidad de video que necesita para reproducir en lugar de descargar todo el video. Esto lo hace mucho más eficiente.

Tenga en cuenta que esto solo funciona en versiones recientes.

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