I am trying to play a mp4 video on my HTML page, I have searched the web and found that in HTML5 I can do this with video tag like this below

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

Issue I am facing

• My main issue is my video is stored in my local puter in some location, So how can I call that from that path
• In my system it is located in D drive so I want to call it from there
• I am new to this so I don't know if I am doing it the right way; is my approach correct?
• My requirement is to auto-play video on my web page

I am doing like this

<video width="320" height="240" autoplay>
  <source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>

D:\Video\samplevideo.mp4 is the path of my file and samplevideo.mp4 is the name of the video

On Chrome it show error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4

And on Firefox All candidate resources failed to load. Media load paused.

Edit

My main focus is to play video on webpage.

I need to play a video on the web (HTML page) when page is loaded I have that video in my system at D:\Video\samplevideo.mp4 this path, how can I play that video when page is loaded.

I am trying to play a mp4 video on my HTML page, I have searched the web and found that in HTML5 I can do this with video tag like this below

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

Issue I am facing

• My main issue is my video is stored in my local puter in some location, So how can I call that from that path
• In my system it is located in D drive so I want to call it from there
• I am new to this so I don't know if I am doing it the right way; is my approach correct?
• My requirement is to auto-play video on my web page

I am doing like this

<video width="320" height="240" autoplay>
  <source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>

D:\Video\samplevideo.mp4 is the path of my file and samplevideo.mp4 is the name of the video

On Chrome it show error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4

And on Firefox All candidate resources failed to load. Media load paused.

Edit

My main focus is to play video on webpage.

I need to play a video on the web (HTML page) when page is loaded I have that video in my system at D:\Video\samplevideo.mp4 this path, how can I play that video when page is loaded.

• javascript
• html
• video

• 1 Does your video load properly? See your browser console for any errors. – random Commented May 27, 2019 at 5:59
• see stackoverflow./questions/8885701/… – Devsi Odedra Commented May 27, 2019 at 6:00
• @randomSoul no it is not loading it shows error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4 on crome and on fire fox All candidate resources failed to load. Media load paused. – manish thakur Commented May 27, 2019 at 6:01
• use file:///D:/Video/samplevideo.mp4 or host on a webserver and give the url – P D K Pavan Kumar Commented May 27, 2019 at 6:02
• @DevsiOdedra that one i have already seen it is about to select video from local drive then play – manish thakur Commented May 27, 2019 at 6:03

5 Answers 5

Try this Code

 <video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
    <source src="video/movie.webm" type="video/webm">
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
</video>

I can give you some pieces of advice.First,you can use the absolute path about video,place the video file on the server,then you can get a path such as www.xxx./movie.mp4,and you can write the code on your HTML page,like this:

<video width="320" height="240" autoplay>
  <source src="www.xxx./movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Second,you can place your video file on the directory as same as the HTML page location.For example,if your HTML page in the directory which called test.you can create a directory which called src,and you can write the code on your HTML page,like this:

<video width="320" height="240" autoplay>
  <source src="./src/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Third,you can use the input tag to upload the local video file,the HTML code as below:

  <input type="file" id="myInput"/>
  <video controls autoplay></video>

the js code as below:

     var input = document.getElementById('myInput'), 
         video = document.getElementById('myVideo');
        input.onchange = function () {
            var file = this.files[0];
            var url = URL.createObjectURL(file);
            video.innerHTML = '<source src="' + url + '" type="video/mp4">';
        }

Fourth,use the object tag.you can write the code,like this:

//the HTML code
<div id="playhere"></div>

//js code
function play(fn){
  var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
   document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
 play('D:\\Video\\samplevideo.mp4')

but that way isn't supported on chrome browser.

Excuse me,I'm new to speak English.

Can you try this

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Also follow this link for more info.

http://mrbool./how-to-add-and-play-videos-in-html/26171

For the very basics of getting this working move D:/Video/samplevideo.mp4 to the same location as your html file.

Then change your code to:

<video width="320" height="240" autoplay>
  <source src="samplevideo.mp4" type="video/mp4">
</video>

Make sure Tomcat is set up to server the .mp4 mimetype or extention.

Next you should read up on how paths work in HTML.

you need to put an alternative text like this to check of your browser or smartphone supports video autoplay.

like this:

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

```