Vue PWA를 사용하여 Vue.js 3에서 오프라인으로 비디오를 저장합니다.

Question

저는 Vue 3와 Typescript를 사용하고 있습니다. PWA에서 비디오를 재생하려고 합니다. 온라인에서는 잘 작동하는데, 오프라인에서 시도하면 동영상이 로드되지 않습니다. 비디오를 자산 폴더에 저장하고 완성된 버전의 비디오는 미디어 폴더에 저장됩니다. 당신의 도움을 주셔서 감사합니다.

<video autoplay loop class="video">
    <source :src='require("@/assets/videos/test.mp4")' type='video/mp4'>
  </video>

Answer 1

직접 해결책을 찾았습니다.

localstorage나 indexedDB(동영상용)를 사용하면 쉽게 할 수 있습니다. 모바일 Safari의 크기 제한은 50MB이므로 이는 iOS의 작은 동영상에만 작동합니다(https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker#how_much_can_you_store).

indexedDB가 없는 또 다른 솔루션은 여기에서 찾을 수 있습니다: https://stackoverflow.com/a/56337080/7439224