將使用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（用於影片）輕鬆完成。這僅適用於iOS 上的小視頻，因為移動Safari 的大小限制為50MB (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