Czy można wstępnie załadować i buforować pliki wideo bez dodawania ich do DOM?

Question

Pracuję nad grą, która wymaga wyzwolenia jednego z 30 małych plików wideo w zależności od wyniku. Ponieważ filmy wideo muszą być odtwarzane natychmiast po interakcji użytkownika, w idealnym przypadku filmy powinny być wstępnie załadowane i gotowe do pracy.

Dodałem PreloadJS, ustawiłem w kolejce wszystkie potrzebne zasoby.

Patrząc na zakładkę Sieć w inspektorze, widzę wszystkie 20 MB filmów przenoszących się na ekranie ładowania.

Jednak, gdy przychodzi czas, aby odtwarzać klipy, wydaje się być ponownie pobierając je raczej niż ich odtwarzanie z pamięci ...

Myślałem, że raz pliki zostały pobrane, oni po prostu zatrzymać w pamięci podręcznej przeglądarki i gdy spróbuję wczytać plik z tym samym src, pobierałbym go z puli pobranych zasobów, ale nie wydaje się, żeby tak było ...

Każdy pomysł, jak to zrobić może przechowywać pobrane pliki w pamięci bez dodawania 30 odtwarzaczy wideo do strony?

Dzięki!

Ger

Answer 1

Można spróbować wczytać cały plik do pamięci za pomocą Blob i obiektowo-URL. W ten sposób niewłączony element wideo może odtwarzać się bezpośrednio za pośrednictwem adresu URL obiektu.

Jeśli jest to dobra strategia w odniesieniu do zasobów systemowych to oczywiście jest coś, co należy samemu zdecydować.

• obciążenia przez XHR jak blob
• utworzyć obiektu URL: var url = (URL || webkitURL).createObjectURL(blob);

Film jest już w pamięci, więc kiedy trzeba go odtworzyć, ustawić ją jako źródło elementu wideo i ciebie powinien być gotowy:

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

Adres URL obiektu jest przechowywany w pamięci podczas cyklu życia strony. W razie potrzeby możesz ręcznie go unieważnić:

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