HTML Video Loop lädt die Videodatei erneut herunter

Ich habe ein HTML5-Video, das ziemlich groß ist. Ich benutze auch Chrome. Das Videoelement hat das loopAttribut, aber jedes Mal, wenn sich das Video "wiederholt", lädt der Browser die Videodatei erneut herunter. Ich habe gesetzt Cache-Control "max-age=15768000, private". Dies verhindert jedoch nicht das zusätzliche Herunterladen der identischen Datei. Ich verwende Amazon S3, um die Datei zu hosten. Außerdem antwortet der s3-Server mit dem Accepts RangesHeader, wodurch die mehreren hundert Teil-Downloads der Datei mit dem 206http-Antwortcode angefordert werden.

Hier ist mein Video-Tag:

<video autoplay="" loop="" class="asset current">
    <source src="https://mybucket.s3.us-east-2.amazonaws.com/myvideo.mp4">
</video>

AKTUALISIEREN:

Es scheint, dass die beste Lösung darin besteht, zu verhindern, dass der Accept RangesHeader mit der ursprünglichen Antwort gesendet wird, und stattdessen einen 200-http-Antwortcode zu verwenden. Wie kann dies erreicht werden, damit das Video vollständig über eine .htaccessDatei zwischengespeichert wird?

Danke im Voraus.

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>

Google Chrome hat eine Begrenzung für die Größe des Dateifangs. In diesem Fall würde meine vorherige Antwort nicht funktionieren. Sie sollten so etwas wie einen Dateikomprimierer verwenden. Diese Ressource kann die Datei möglicherweise so weit komprimieren, dass der Dateicache geeignet ist. Für den Webbrowser kann eine neue Cache-Größe manuell festgelegt werden. Dies ist jedoch nicht möglich, wenn der Endbenutzer seinen Cache nicht so festgelegt hat, dass er mit dem für das lange Video erforderlichen Speicherplatz übereinstimmt.