Можно ли предварительно загружать и кэшировать видеофайлы без добавления их в DOM?

Question

Я работаю над игрой, которая включает в себя запуск одного из 30 небольших видеофайлов в зависимости от того, какой результат вы получите. Поскольку видео необходимо воспроизводить сразу после того, как пользователь взаимодействует, в идеале я хотел бы, чтобы видео было предварительно загружено и готово к работе.

Я добавил PreloadJS, поставил в очередь все необходимые мне активы.

Глядя на вкладку «Сеть» в инспекторе, я вижу все 20 миллионов видео, передаваемых на экране загрузки.

Однако, когда приходит время, чтобы играть клипы, это, кажется, повторно загрузить их, а не играть в них из памяти ...

Я думал, что после того, как файлы были загружены, они просто остаться в кеше браузера, и как только я попытался загрузить файл с тем же src, он вытащил бы его из пула загруженных активов, но это, похоже, не так ...

Любая идея, как я может хранить загруженные файлы в памяти без добавления на страницу 30 видеоплееров?

Спасибо!

Ger

Answer 1

Вы можете попытаться загрузить весь файл в память с помощью Blob и объектно-URL. Таким образом, незакрепленный элемент видео может воспроизводиться напрямую через URL-адрес объекта.

Если это хорошая стратегия в отношении системных ресурсов, это, конечно же, то, что вам нужно решить самостоятельно.

• нагрузка через XHR в blob
• Создать URL объекта: var url = (URL || webkitURL).createObjectURL(blob);

видео теперь в памяти, поэтому, когда вам нужно играть, установить его в качестве источника для видеоэлемента и вы должен быть готов к работе:

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

объект-URL хранится в памяти в течение жизненного цикла страницы. Вы можете вручную аннулировать его таким образом, если необходимо:

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