How to play video in HTML page

Question

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 computer 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.

Does your video load properly? See your browser console for any errors. — random, May 27 '19 at 05:59
see https://stackoverflow.com/questions/8885701/play-local-hard-drive-video-file-with-html5-video-tag — Devsi Odedra, May 27 '19 at 06: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, May 27 '19 at 06:01
use file:///D:/Video/samplevideo.mp4 or host on a webserver and give the url — P D K Pavan Kumar, May 27 '19 at 06:02
@DevsiOdedra that one i have already seen it is about to select video from local drive then play — manish thakur, May 27 '19 at 06:03
May be this will help you https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource — Siva Sunkara, May 27 '19 at 06:06
@PDKPavanKumar hey that is not working, and i am doing this project on local server using tomcat so no way to host it on webserver i have to call that file from local system,on which system this page is loaded — manish thakur, May 27 '19 at 06:07
@xmaster i am doing it like `` please check my edit i have uploaded console image — manish thakur, May 27 '19 at 06:15
check this [link](https://stackoverflow.com/questions/34901523/file-url-not-allowed-to-load-local-resource-in-the-internet-browser) — xmaster, May 27 '19 at 06:22
"local server using tomcat so no way to host it on webserver" - [Tomcat is a web server](https://stackoverflow.com/questions/2469949/tomcat-is-web-server-or-application-server). What are you entering into your browser address bar to view the page? — Jon P, May 27 '19 at 06:25
@JonP `http://localhost:8080/MyWeb/test.html` this is my URL to open Page, I think i am doing it wrong way if you can help me with some approach or guidance it will be very helpful — manish thakur, May 27 '19 at 06:27
In general **you can't play local content**, that is the error you are getting. This is a security issue. A web server should have no information about the users (clients) file system, again a very important security measure. How does your server know the client has a file at that location? You may do, but another user may not even have a `D` drive, let alone a `D` drive with a *video* directory. — Jon P, May 27 '19 at 07:08

Riddhi Busa · Accepted Answer · 2019-05-27T06:29:56.617

2

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>

edited May 27 '19 at 06:29

answered May 27 '19 at 06:20

Riddhi Busa

116
1
11

hey i am doing same my main issue is the video file is in my local pc so what should i put in place of `src="movie.mp4"`, can you explain me where that movie.mp4 file is ? – manish thakur May 27 '19 at 06:22
Make the Video Folder. video is required in 3 formats 1.) webm 2.) mp4 3.) ogg – Riddhi Busa May 27 '19 at 06:30
I have already made a video folder which is in my PC not in my project and i can play any one of them on my web page no need to have all three format – manish thakur May 27 '19 at 06:31
once you try the relative path. – Riddhi Busa May 27 '19 at 06:33
You are saying to create a video folder in my project and put that video inside that? – manish thakur May 27 '19 at 06:34
But i cant create a folder inside my project directory because when in future if user want to change the video then i need to go to my code, that's why i am trying to create a folder in my local system – manish thakur May 27 '19 at 06:44
Then there is no other option. If you upload any video player like youtube or Vimeo then you should have to change link either you should change local video in the folder. – Riddhi Busa May 27 '19 at 06:46
Local Video means you should play without uploading. You can play your local pc video in a webpage – Riddhi Busa May 27 '19 at 06:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/193980/discussion-between-manish-thakur-and-riddhi-busa). – manish thakur May 27 '19 at 06:51
It is not working on crome as i am using all 3 formats – manish thakur May 27 '19 at 08:24

eveningwater · Answer 2 · 2019-05-27T07:12:45.667

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.com/movie.mp4,and you can write the code on your HTML page,like this:

<video width="320" height="240" autoplay>
  <source src="www.xxx.com/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.

hey your answer is suggesting to upload the video first, here i have a video in my system (PC) i need to play that — manish thakur, May 27 '19 at 06:51

Anshu · Answer 3 · 2019-06-19T08:35:37.903

1

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.com/how-to-add-and-play-videos-in-html/26171

edited Jun 19 '19 at 08:35

answered May 27 '19 at 06:43

Anshu

1,277
2
13
28

yes i am doing the same but my video file is in my local computer not in my project so what should i put at sre="movie.mp4" – manish thakur May 27 '19 at 06:45
you can add the proper path . – Anshu May 27 '19 at 07:06
1. Right click on the video file. then go to properties – Anshu May 27 '19 at 07:06
2. Then you can take the location of the file . And add them in to your src=" " hare. – Anshu May 27 '19 at 07:07
please check this reference http://mrbool.com/how-to-add-and-play-videos-in-html/26171 . hope this will help you. – Neeraj Amoli May 27 '19 at 07:23
@manishthakur how you are rendering this file ? simply making a one html file and then double clcikcking this file or running this file with any web server like xamp or wamp? – Neeraj Amoli May 27 '19 at 07:34
@NeerajAmoli I am using Tomcat – manish thakur May 27 '19 at 08:23
@manishthakur upload your video inside that folder where html file is ,and then try to give name of video to src attribute. – Neeraj Amoli May 27 '19 at 10:14

score 0 · Answer 4 · answered May 27 '19 at 06:31

0

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.

answered May 27 '19 at 06:31

Jon P

19,442
8
49
72

That video i can't move to my HTML location i need to call this from a file/ folder only as it will be dynamic user will be changing the videos as per there requirement – manish thakur May 27 '19 at 06:34
Note the error `Not allowed to load local resource: file:///D:/Video/samplevideo.mp4` - You are not allowed to load local resources. The user will not be able to play video on their machine on a page served by your (tomcat) webserver. How is the user choosing otherwise dynamically generating the video. Please expand on your question as I suspect you have an [XY Problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – Jon P May 27 '19 at 06:44

score -1 · Answer 5 · answered May 27 '19 at 06:02

-1

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>

```

answered May 27 '19 at 06:02

Manghud

1,126
3
12
20

hey i am doing this same i thing you are copying paste answer from google – manish thakur May 27 '19 at 06:03
Also try to use this syntax for an alternative: ` – Manghud May 27 '19 at 06:04

How to play video in HTML page

Edit

5 Answers5

Linked