I'm working on a Vue project that involves showing a video stored in a local directory
<video width="320" controls src="internal_path.mp4" type="video/mp4"
height="240" autoplay muted loop>
Is my code snippet for displaying the video but it doesn't work. I was confused on why it works for videos that are stored online, and how to fix it to show local videos as well.
The error message I get is vue.runtime.esm.js?2b0e:1888 Error: Cannot find module
Lok, most local storage directories on browsers limit to about ~10 MB or less and differs greatly across browsers.
See: What is the max size of localStorage values?
Even if it was a small video, lets say about 3MB, you would have to encode it then put it in the localstorage then decode it when you want to retrieve from the local storage.
MP4 file not encoded:
^@^@^@^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^
This binary may cause problems.
There's ways to encode the video into base64 which can be encoded to and decoded from for easier handling with the raw data of the video file.
See: how to decode video from base64?
Also: https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
