How to Embed Video using HTML5 with local file

Question

I'm trying to embed a video using html5 with a local mp4 file.

file on my local machine.

when i debug i keep getting invalid file path or unsupported video type.

What am i missing? I can get this to work if i plug in a http link to a mp4. But when i plug in a local file it doesn't

    <link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet" />
    <script src="http://vjs.zencdn.net/4.1/video.js">
        videojs("example_video_1", {}, function(){
        });
    </script>
    <video id="example_video_1" class="video-js vjs-default-skin" width="640" height="264">
        <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
    </video>

Answer 1

HTML5 works just by having the video tags. Make sure to include the video source directly in the video tag like:

<video id="example_video_1" class="video-js vjs-default-skin" width="640" height="264" src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' />
</video>

Concerning the video src-path. The video must be somewhere inside your application directory in order to play. So when your application is called video_homepage then put a folder in it with videos. In this example case the source is:

<video src= video_homepage/videos/demo1.mp4></video>

That already should make the video run in Safari and IE (for mp4). For Firefox and Chrome you must convert the video first to .webm (free webm video converter is a free and good converter)

video id and class etc. is only needed when you use an external .js video player (plug in). for playing videos in HTML5 you only need the video tags and src. thats it.

Answer 2

If you have Chrome installed, another option is to use:

Web Server for Chrome

It allows you to serve the content of a local folder on a private server accessible through local network. Just use the app to point to a folder on your pc and voilà...it's content is available by using url (by default: http://127.0.0.1:8887/[filepath]).