在内部存储中显示视频 (Vue)

Question

我正在处理一个 Vue 项目，该项目涉及显示存储在本地目录中的视频

<video width="320" controls src="internal_path.mp4" type="video/mp4"
height="240" autoplay muted loop>

是我的代码 sn-p 用于显示视频，但它不起作用。我很困惑为什么它适用于在线存储的视频，以及如何修复它以显示本地视频。

我得到的错误信息是 vue.runtime.esm.js?2b0e:1888 Error: Cannot find module

Answer 1

好吧，浏览器上的大多数本地存储目录限制为大约 10 MB 或更少，并且在不同浏览器之间存在很大差异。

见： What is the max size of localStorage values?

即使它是一个小视频，比如说大约 3MB，您也必须对其进行编码，然后将其放入本地存储中，然后在您想从本地存储中检索时对其进行解码。

MP4 文件未编码：

^@^@^@^Xftypmp42^@^@^@^@isommp42^@^A<86><98>moov^@^@^@lmvhd^@^@^@^@ÙÜR^YÙÜR^Y^@^@0^@^@7°O^@^A^@^@^A^@^@^@^@^@^@^@^@^@^@^@^@^A^@^@^@^@^@^@^@^@^@^@^@^@^@^@^@^A^@^@^@^@^@^@^@^@^@^@^@^>
0stco^@^@^@^@^@^@^B<88>^@^A<86>¸^@^CÝÞ^@^E^GA^@^E<8c>n^@^F%<96>^@^Fæ@^@^G<9c>^H^@^Hn¢^@ F2^@^L)ê^@^NÔ3^@^PI/^@^R^B<9a>^@^RLÖ^@^Rs^_^@^SRk^@^Sö<8e>^@^T<90>^H^@^U^V§^@^U´b^@^Y^F]^@^[>
E=^A^K^\^U^A^

这个二进制文件可能会导致问题。

有多种方法可以将视频编码为 base64，可以对其进行编码和解码，以便更轻松地处理视频文件的原始数据。

见： how to decode video from base64?

还有： https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding