No estoy seguro de cuál es el verdadero problema que enfrenta.
Podría ser que Chrome tenga un límite de tamaño máximo de lo que almacenarían en caché, y si fuera el caso, no usar Range-Requests no resolvería nada.
Otra posible explicación es que el almacenamiento en caché de medios no es realmente una tarea simple.
Sin ver su archivo, es difícil saber con certeza en qué caso se encuentra, pero debe comprender que para reproducir un medio, el navegador no necesita recuperar todo el archivo.
Por ejemplo, puede reproducir un archivo de video en un elemento <audio>, ya que la transmisión de video no se utilizará, un navegador podría omitirlo completamente y descargar solo la transmisión de audio. No estoy seguro si alguno lo hace, pero podrían. La mayoría de los formatos de medios separan físicamente las transmisiones de audio y video en el archivo y sus posiciones de bytes están marcadas en los metadatos.
Ciertamente podrían almacenar en caché las solicitudes de rango que realizan, pero creo que todavía es bastante raro que lo hagan.
Pero aunque sea tentador deshabilitar Range-Requests, debe saber que algunos navegadores (Safari) no reproducirán sus medios si su servidor no permite Range-Requests.
Entonces, incluso entonces, probablemente no sea lo que quieres.
Lo primero que puede intentar es optimizar su video para uso web. En lugar de mp4, sirva un archivo webm. Por lo general, ocuparán menos espacio para la misma calidad y quizás evite la limitación de tamaño máximo .
Si el archivo resultante sigue siendo demasiado grande, entonces una solución sucia sería usar un MediaSource para que el archivo se mantenga en la memoria y solo deba buscarlo una vez.
En el siguiente ejemplo, el archivo se recuperará por completo solo una vez, en fragmentos de 1 MB, transmitido por MediaSource mientras se recupera y luego solo se utilizarán los datos en la memoria para las reproducciones en bucle:
document.getElementById('streamVid').onclick = e => (async () => {
const url = 'https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm';
// you must know the mimeType of your video before hand.
const type = 'video/webm; codecs="vp8, vorbis"';
if( !MediaSource.isTypeSupported( type ) ) {
throw 'Unsupported';
}
const source = new MediaSource();
source.addEventListener('sourceopen', sourceOpen);
document.getElementById('out').src = URL.createObjectURL( source );
// async generator Range-Fetcher
async function* fetchRanges( url, chunk_size = 1024 * 1024 ) {
let chunk = new ArrayBuffer(1);
let cursor = 0;
while( chunk.byteLength ) {
const resp = await fetch( url, {
method: "get",
headers: { "Range": "bytes=" + cursor + "-" + ( cursor += chunk_size ) }
}
)
chunk = resp.ok && await resp.arrayBuffer();
cursor++; // add one byte for next iteration, Ranges are inclusive
yield chunk;
}
}
// set up our MediaSource
async function sourceOpen() {
const buffer = source.addSourceBuffer( type );
buffer.mode = "sequence";
// waiting forward to appendAsync...
const appendBuffer = ( chunk ) => {
return new Promise( resolve => {
buffer.addEventListener( 'update', resolve, { once: true } );
buffer.appendBuffer( chunk );
} );
}
// while our RangeFetcher is running
for await ( const chunk of fetchRanges(url) ) {
if( chunk ) { // append to our MediaSource
await appendBuffer( chunk );
}
else { // when done
source.endOfStream();
}
}
}
})().catch( console.error );
<button id="streamVid">stream video</button>
<video id="out" controls muted autoplay loop></video>