HTML "File" / OpenFile Dialog workaround

Question

I want to open local mp4 movies in a webpage and play it just there.
No uploads to anywhere, nothing else.
I use my own buttons with below workaround which works with Safari 7.1.3 just fine.

<label for="fileToOpen">
 <button type="file"  id="loadMedia" class="loadMediabutton button">Load Movie</button>
</label>
<input type="File" name="loadMedia" id="fileToOpen" style="display:none">

Now my question, if someone can help to proceed:

1. How to retrieve the movie's local url from the <input> tag ?
2. How to pass the url to the <video> tag src attribute ?
3. How to avoid sandboxing problems ?

Answer 1

To answer your questions (that I have slightly reworded for clarity):

1. How to retrieve the movie's local url from the file-input ?

   Say, for example, the user populates the file-input with:
   c:\Users\Username\My Documents\file.ext
   On modern browsers (except IE with a relaxed security-setting which is pretty much only intended for trusted private intranet-use) you can not get the actual local path (c:\Users\Username\My Documents\) as that would present an obvious privacy-issue (a security-problem).
   Instead you'll get C:\fakepath\. Getting the filename and extension (file.ext) is no problem.
   Please see my detailed up-to-date answer about this here.

2. How to pass the file's URL to the video's src attribute ?

   To solve the problem of not having a valid URL (in this case using the file:/// protocol) to set to the video's source-attribute (or image, audio, etc..), modern browsers have the URL Store.

   One can think of this as being a small local private (other's can't access it) mini-webserver (including status-codes for XMLHttpRequest) serving any kind of binary or data.
   These URL's can never live longer than a browser's session (so storing them in local storage etc, is useless) OR one can revoke automatically on first use (using createFor) or manually using (revokeObjectURL).

   In this case a simple URL.createObjectURL(/*file-reference*/) will create the anonymous URL for the actual local file-path in the browser's URL Store that you can then use like any other served content.

   See the following example, just to get you started:

   window.URL = window.URL || window.webkitURL;  //fallback for older prefixed objects
   
   document.getElementById('loadMedia').onclick=function(){
     document.getElementById('fileToOpen').click();
   };
   
   document.getElementById('fileToOpen').onchange=function(){
     if(this.files && this.files[0]){
       var vid = document.getElementById('vid');
       document.getElementById('vid_name').innerHTML=this.files[0].name;
       // revoke previous url
       vid.getAttribute('src') && URL.revokeObjectURL(vid.getAttribute('src'));
           // set new url
       vid.setAttribute('src', URL.createObjectURL(this.files[0]));
       vid.load();
     }
   };

   <label for="fileToOpen">
     <button type="file"  id="loadMedia" class="loadMediabutton button">Load Movie</button>
   </label>
   <input type="File" name="loadMedia" id="fileToOpen" style="display:none">
   <span id="vid_name"></span>
   <br>
   <video id="vid" controls="controls"></video>

   
   ^{Note, with flashblocker installed there is no video-element until the user has activated it, just like with flash.. Both getting the video-element and subsequently setting it's source is not possible until the user 'runs' the blocked video-element. Solving this was outside my scope for this answer.}

3. How to avoid sandboxing problems ?

   What problems, to my knowledge you are not dealing with the sandboxed filesystem here (since you are not copying the local file to the local sandboxed file-system for storage)?
   Local files (or in-memory BLOB's) that the URL Store links to are read-only!
   The user manually 'shared' the file(s) (by selecting/populating a file-input on a web-page/app). From that point on, the application could read/upload/analyze/what-ever to the file (but not change/delete/overwrite/etc it).