Question

I just learned here that in order to play some video in HTML5’s <video> tag I should make sure that while serving video on some URL appropriate Content-Type has also to be set.

How can this be avoided when I simply run my web page from local file system or I don’t have ability to manipulate server response headers?

Answer 1

Your best bet is to use HTML5 FileReader API (tutorial).
That will provide the local video as a url. In some sites you could find demo showing the previews of the images before upload, but by theory (and practical, see the link below) it is possible to use the same on audio and video.

I’ve done a small demo (not for this, but for the Camera API), which might suite your need.

see it yourself: http://jsbin.com/efunel/6

the video demo worked in chromium(20.0), and in firefox(16.0) (after taking REALLY long time!!!), with Webm format only.

PS: try selecting a small video (below 15M).

EDIT:
(code snippet as @headkit requested it)

fileReader = new FileReader();
fileReader.onload = function (event) {
    element.attr("src",event.target.result);
};
fileReader.readAsDataURL(file);