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>
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.
We can't debug your page because
- You are working locally
- We don't know where the video file is located at
My advice would be: drop your video file to browser, copy the address from location bar and paste it to src attribute of your source tag.
Simple answer: Not allowed to load local resource.
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.
though this might help:
Play local (hard-drive) video file with HTML5 video tag?
Good luck.
