9

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>
Murda Ralph
  • 175
  • 2
  • 4
  • 16
  • Documentation: https://developer.mozilla.org/en/docs/Web/HTML/Element/video –  Sep 05 '17 at 09:54

4 Answers4

14

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.

Hobby99
  • 703
  • 2
  • 14
  • 35
1

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]).

Benoit Tassin
  • 11
  • 3
1

Seeing you source address <source src="file:///C:/Users/rpimentel/Desktop/converts/demo1.mp4" type='video/mp4' /> I get that you are using windows system.
I had the same issue but in Linux specifically in Ubuntu, I fixed it by creating a Symlinks in the webpage_home_directory like

user1@ubuntu-pc:/opt/lampp/htdocs/video$ sudo ln -s /home/user1/Downloads/video /opt/lampp/htdocs/video/vid

Then changed the source address accordingly.

<div class="container">
    <video src="./vid/vid1001.mkv" width="600" height="350" controls></video>
</div>

And the video played normally. This saved me space or else I would be copying the whole video directory in the webpage_home_dir un-necessarily.

Benison Besra
  • 71
  • 1
  • 5
  • 1
    It's somehow weird this issue as while under windows the solution is to use file:/// in src, under Linux there is no other way out than using a Symlink as you explained. I'm wondering if the 'file:///' preamble is ignored under Linux in that case this could be a clear violation of general behavior of HTML code in Linux and Windows. They should act in the same way, isn't it? – Power Engineering Nov 18 '20 at 18:40
  • Yes, I would like to know why this is different on linux and where I can read more about it. – Heberto Mayorquin Oct 03 '22 at 12:37
0

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.

Community
  • 1
  • 1
Aashish Negi
  • 1