将使用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