3

I have a button on my video player that allows users to select a file from their computer to play that through the HTML5 video player. It 

$('#LocalClip').on('change', function() {
    var file = $(this)[0].files[0];
    var url = URL.createObjectURL(file);
    $('video').attr('src', url);
});

It gets the file from an input, then converts it to a blob url, then changes the video source to it.

I wanted it to persist across reloading the page, so I tried storing the url in localStorage. (Also tried the file but that won't store).

But when I reload the page, the blob url is invalid. Is there a way to have that URL persist across reloading the page, without storing the actual video file in a javascript filesystem?

Edit: Just to clarify, I don't want to store the actual video in localStorage. Just a reference to the video to be loaded whenever the user loads the page again.

cclloyd
  • 8,171
  • 16
  • 57
  • 104
  • Depends on file size. localStorage is limited to about 5Mb and specific limit is browser dependent. IndexedDb isn't as limited – charlietfl Jan 08 '18 at 02:09
  • 2
    For the reason of security, it is no permitted to access file system using javaScript without any user's action.So in the file API of in javaScript, we can not get the true path of file in the file system.By the way, just for caching data across reloading page, sessionStorage is also a way.Chrome limits size of sessionStorage, but firefox does not. – grantonzhuang Jan 08 '18 at 02:46
  • Same issue. any solution on chrome? – Gabriel Aoki Jan 25 '23 at 12:35
  • [Multiple answers here](https://stackoverflow.com/questions/15201071/how-to-get-full-path-of-selected-file-on-change-of-input-type-file-using-jav) touch on this being a security risk, thus will never be available. However also mentioned is if this same HTML form were in an Electron app, the capability is there (presumably because a user has officialy installed the Electron-based app on their OS). – Kalnode Apr 27 '23 at 23:37

0 Answers0