Est-il possible de précharger et de mettre en cache des fichiers vidéo sans les ajouter au DOM?

Question

Je travaille sur un jeu qui consiste à déclencher l'un des 30 petits fichiers vidéo en fonction du résultat obtenu. Comme les vidéos doivent être lues immédiatement après l'interaction de l'utilisateur, idéalement, j'aimerais que les vidéos soient préchargées et prêtes à l'emploi.

J'ai ajouté PreloadJS, mis en file d'attente tous les actifs dont j'ai besoin. En regardant l'onglet Réseau dans l'inspecteur, je peux voir tous les 20mb de vidéos de transfert sur l'écran de chargement.

Cependant, quand vient le temps de jouer les clips, il semble être les re-téléchargement plutôt que de les jouer de la mémoire ...

Je pensais qu'une fois que les fichiers ont été téléchargés, ils venaient de rester dans le cache du navigateur, et une fois que j'ai essayé de charger un fichier avec le même src, il tirerait du pool d'actifs téléchargés, mais cela ne semble pas être le cas ...

peut garder les fichiers téléchargés en mémoire sans ajouter 30 lecteurs vidéo à la page?

Merci!

Ger

Answer 1

Vous pouvez essayer de charger tout le fichier en mémoire à l'aide d'objets et Blob-URL. De cette façon, l'élément vidéo non attaché peut être lu directement via l'URL de l'objet.

Si c'est une bonne stratégie en ce qui concerne les ressources système, c'est bien sûr quelque chose que vous devez décider vous-même.

• charge par XHR comme blob
• Créer URL de l'objet: var url = (URL || webkitURL).createObjectURL(blob);

La vidéo est maintenant en mémoire, quand vous devez jouer, définir comme source pour l'élément vidéo et vous devrait être prêt à aller:

var video = document.createElement("video"); 
video.oncanplay = ...; // attach to DOM, invoke play() etc. 
video.src = url;  // set the object URL 

An-URL d'objet est conservé en mémoire pendant le cycle de vie d'une page. Vous pouvez le révoquer manuellement de cette manière si nécessaire:

(URL || webkitURL).revokeObjectURL(url);