I want to achieve the following.

<video src="file:///Users/username/folder/video.webm">
</video>

The intent is that the user will be able to select a file from his/her hard drive.

And the reason for not uploading is of course transmission costs and storage quota. There will be no reason to save the file.

Is it possible?

upvote
  flag
It definitely won't work with a file input. It may work with HTML5 ondrop, but I don't think you can leverage that for a file upload. Your best bet would probably be to do a Chrome extension. – Brian Nickel

3 Answers 11

That will be possible only if the HTML file is also loaded with the file protocol from the local user's harddisk.

If the HTML page is served by HTTP from a server, you can't access any local files by specifying them in a src attribute with the file:// protocol as that would mean you could access any file on the users computer without the user knowing which would be a huge security risk.

As Dimitar Bonev said, you can access a file if the user selects it using a file selector on their own. Without that step, it's forbidden by all browsers for good reasons. Thus, while his answer might prove useful for many people, it loosens the requirement from the code in the original question.

upvote
  flag
Dimitrov Bonev's solution shows this solution to be incorrect--you can access local files through input type=file. – J.T. Taylor
upvote
  flag
Well, his solution only works if you let the user select the file first. You still can't name the path to the file in the HTML source (as stated in the question) and access it that way. Thus, his solution is technically for another question. – Holger Just
upvote
  flag
vlc player also can play any file on the computer, but so there is also a security risk. It can download files from our hard disk to their servers without us noticing if they want to, can't they? So why there is no security risk then? At worst case they user could be allowed to accept manually if he allows browser to play the file. Because there are situations where user trust 100% the page, because users are the ones who work in same company as web creators. – Darius.V
up vote 182 down vote accepted

It is possible to play a local video file.

<input type="file" accept="video/*"/>
<video controls autoplay></video>

When a file is selected via the input element:

  1. 'change' event is fired
  2. Get the first File object from the input.files FileList
  3. Make an object URL that points to the File object
  4. Set the object URL to the video.src property
  5. Lean back and watch :)

http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/

4 upvote
  flag
Hat's off. Fantastic! – chris
upvote
  flag
+1 internets, fine sir. Just what I was after. – richo
upvote
  flag
Pure Awesomeness! – Jim
upvote
  flag
This works for me in chrome on a mac. Doesn't work with safari 6.1 – Patrick Cullen
1 upvote
  flag
upvote
  flag
Excellent solution, it also works on Chrome for Windows. – J.T. Taylor
upvote
  flag
Has anyone done the work to page in and out appropriate chunks of video so as not to kill browser memory for large videos? – Eric Bloch
upvote
  flag
Unable to preview .mov or .avi files Asked the question here : //allinonescript.com/questions/32599806/… – mpsbhat
upvote
  flag
How to do it through jQuery ? – student-17
upvote
  flag
You won the internet ! – Sujal Mandal
upvote
  flag
This is excellent..i wish i could up vote this 100 times more for not using jQuery – BoundForGlory
upvote
  flag
Best Best answer. like – mghhgm

Ran in to this problem a while ago. Website couldn't access video file on local PC due to security settings (understandable really) ONLY way I could get around it was to run a webserver on the local PC (server2Go) and all references to the video file from the web were to the localhost/video.mp4

<div id="videoDiv">
     <video id="video" src="http://127.0.0.1:4001/videos/<?php $videoFileName?>" width="70%" controls>
    </div>
<!--End videoDiv-->

Not an ideal solution but worked for me.

1 upvote
  flag
If you copy the file to a cache location and set the path of the video source to it, it will play. Copy file to context.getExternalCacheDir().getAbsolutePath(). Works for me. – Derek Wade
upvote
  flag
also can do with any web server in users computer like apache or mongoose – Darius.V

Not the answer you're looking for? Browse other questions tagged or ask your own question.