Home  >  Q&A  >  body text

Will use Vue PWA to store videos offline in Vue.js 3

I'm using Vue 3 and Typescript. I'm trying to play a video in a PWA. It works fine online, but when I try it offline, the video won't load. I store the video in the assets folder and in the finished version the video is in the media folder. thanks for your help.

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

P粉668019339P粉668019339206 days ago421

reply all(1)I'll reply

  • P粉426780515

    P粉4267805152024-03-27 10:45:28

    I found the solution myself.

    Can be easily done using localstorage or indexedDB (for videos). This only works for small videos on iOS as mobile Safari has a size limit of 50MB (https://developers.google.com/web/ilt/pwa/live-data-in-the-service-worker# how_much_can_you_store)

    Another solution without indexedDB can be found here: https://stackoverflow.com/a/56337080/7439224< /p>

    reply
    0
  • Cancelreply