Ich weiß nicht genau, mit welchem Problem Sie wirklich konfrontiert sind.
Es könnte sein, dass Chrome eine maximale Größenbeschränkung für den Cache hat. Wenn dies der Fall ist, würde die Nichtverwendung von Range-Requests nichts lösen.
Eine andere mögliche Erklärung ist, dass das Zwischenspeichern von Medien keine wirklich einfache Aufgabe ist.
Ohne Ihre Datei zu sehen, ist es schwer zu sagen, in welchem Fall Sie sich befinden, aber Sie müssen verstehen, dass der Browser zum Abspielen eines Mediums nicht die gesamte Datei abrufen muss.
Zum Beispiel können Sie eine Videodatei sehr gut in einem <audio> -Element abspielen, da der Videostream nicht verwendet wird. Ein Browser könnte ihn sehr gut vollständig weglassen und nur den Audiostream herunterladen. Ich bin mir nicht sicher, ob es welche gibt, aber sie könnten es. Die meisten Medienformate trennen Audio- und Videostreams in der Datei physisch und ihre Bytepositionen werden in den Metadaten markiert.
Sie könnten sicherlich die Range-Requests zwischenspeichern, die sie ausführen, aber ich denke, es ist immer noch ziemlich selten, dass sie dies tun.
Da es jedoch verlockend sein kann, Range-Requests zu deaktivieren, müssen Sie wissen, dass einige Browser (Safari) Ihre Medien nicht abspielen, wenn Ihr Server Range-Requests nicht zulässt.
Selbst dann ist es wahrscheinlich nicht das, was Sie wollen.
Das erste, was Sie versuchen möchten, ist, Ihr Video für die Webnutzung zu optimieren. Stellen Sie anstelle von mp4 eine WebM-Datei bereit. Diese benötigen in der Regel weniger Platz bei gleicher Qualität, und möglicherweise vermeiden Sie die maximale Größenbeschränkung .
Wenn die resultierende Datei immer noch zu groß ist, besteht eine schmutzige Lösung darin, eine MediaSource zu verwenden, damit die Datei im Speicher bleibt und Sie sie nur einmal abrufen müssen.
Im folgenden Beispiel wird die Datei nur einmal vollständig abgerufen, und zwar in Blöcken von 1 MB, die von der MediaSource beim Abrufen gestreamt werden. Anschließend werden nur die Daten im Speicher zum Schleifen von Spielen verwendet:
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>