When inserting a video in a website using a relative location its rather simple:
<source src="videos/video.mp4" type="video/mp4"/>
However i need to insert a video file from a completely different directory.
Like "C:\Some\Folder\onthedrive\videos"
But the project is in: "C:\XAMPP\htdocs\projectname"
I have also tried these things:
<source src="file://C:\Some\Folder\onthedrive\videos\video.mp4" type="video/mp4"/>
<source src="file://C:/Some/Folder/onthedrive/videos/video.mp4" type="video/mp4"/>
What can I do to fix this?
EDIT:
<source src="file://C:\Some\Folder\onthedrive\videos\video.mp4" type="video/mp4"/>
Actually worked, the webserver and browser recognised it, but due to security one of them decided not to load the file.
Chrome: 'Not allowed to load local resource'.
You have to change "file://" to "file:///".
Why three slashes?
"file:///C:/etc" is a shortcut for "file://localhost/C:/etc"
you can find it here: file URI scheme
EDIT:
I downloaded the video that w3schools is using in there example and my code looks like this
<video width="400" controls>
<source src="file:///C:\Users\Gebruiker\Downloads\mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Make sure that you change the path to the url. So that it is matching with your file tree
Related
I am creating a HTML-Page for my local PC for fun and want to implement a video player.
I searched for how to do it and found something which I applied to my page:
<video width="400" controls>
<source src="Videos/test.mp4" type="video/mp4"><source>
</video>
I even tried to embed the source attribute:
<video width="400" src="Videos/test.mp4" controls></video>
Both end up creating a video frame with play button but nothing is played. Even when I click on the play button nothing reacts to my click.
Does anyone unterstand why?
I think it's because you are using <source> tag twice. And you can't use an empty <source>. It should be like :
<video width="400" controls>
<source src="Videos/test.mp4" type="video/mp4">
</video>
reference : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
You should check the DevTools (F12) network tab for any errors while fetching the video file. Probably your answer will be there.
Most likely, this has something to do with the file path you've entered in the [src] attribute.
From https://www.w3schools.com/tags/att_video_src.asp:
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/movie.ogg")
A relative URL - points to a
file within a web site (like src="movie.ogg")
Try this way it may be work if your src path not correct
Videos/test.mp4 => /Videos/test.mp4
<video width="400" controls>
<source src="/Videos/test.mp4" type="video/mp4"><source>
</video>
I tried this code but video is just continuing to load, not to playing.
I also tried video codec H-264 but that is not working.
Next I tried to convert mp4 video to webm but that did not help either
Can anyone tell me how to do this using jquery and ajax?
<video controls muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Did you checked by drag and drop to open the movie.mp4 or the movie.ogg file?
If the file does not work by simply opening it using a browser, it might be the file's problem, not the code or the browser.
For the file type support per browsers please refer the "Can I use?" pages:
MPEG-4/H.264
Ogg/Theora
I am adding basic video .mp4 from my Windows 10 laptop in HTML but it doesn't pick up the video at all. I tried to open in any browser it doesn't open.
I am reproducing the relevant parts of your code here for explanation purposes.
This is the correct HTML markup to include videos:
<video controls>
<source src="/video/example.mp4" type="video/mp4"> // on your server, is your file 'example.mp4' located at /video/example.mp4 ?
<source src="/video/example.webm" type="video/webm"> // on your server, is your file 'example.webm' located at /video/example.webm?
</video>
I suspect that you are possibly not using the correct filepath for your video files.
As a test, try replacing the content in the src attribute with a video from an online source.
So your code will look like this now
<video controls>
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
</video>
The example video should be displayed on your page now.
So double check the path to the video files and make sure it is correct, because other than that the code is OK. (added / to the beginning of the filepath to refer to your root directory.) If your video files are located in the root directory, then use src="example.mp4
You can find more info on the video tag here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
First I made a screen recording as a video I would like to display.
Than I uploaded the video to VLC to convert the video.
I made one MP4 and a fallback for OGG.
I then moved the videos to my dropbox account so I can host them there.I right clicked and got the link to each video from dropbox. I am trying to use the links as the src in the video tags.
<video width="400" controls>
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=0" type="video/mp4">
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=0" type="video/ogg">
</video>
Even though I told VLC to convert it to MPV, the file extension is m4v.. Is that the same thing?
The video just shows blank. Not getting any errors either.Not sure what I missed.
The following Fixed it for me.
I made two changes:
change dl=0 at the end of your dropbox link to dl=1. I believe this makes it a download link instead of a page to view a download link.
Due to a bug in chrome on OSX certain mp4 files will fail to play correctly (some kind of graphics acceleration issue), but it won't fall back to the ogv. For this reason, i have placed the ogv as first since it will work on OSX-chrome, and platforms that don't support it should fall back to the mp4.
<video width="400" controls>
<source src="https://www.dropbox.com/s/9owwdbm8p0nz1f0/oggguntitled.ogg?dl=1" type="video/ogg">
<source src="https://www.dropbox.com/s/m7emkfs994sgm5g/Untitled.m4v?dl=1" type="video/mp4">
</video>
I have a website where I am trying to show a video.I have 2 mp4 format videos and both are ok(not corrupted).When I try to show these two using tag in html5 one is working but another is not working.
I have used the code given below
<video width="320" height="240" controls>
<source src="video/v1.mp4" type="video/mp4">
<source src="video/v1.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<video width="320" height="240" controls>
<source src="video/theme.mp4" type="video/mp4">
<source src="video/theme.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
here,in firefox first one is working great but the next one shows the error "No video with supported format and mime type found".In chrome first one is ok and second one only shows audio.
Please help me to solve this.
Thanks in advance.
Check to see if video/theme.mp4 is accessible in the browser. View source and try clicking the link or see if it is loaded in the resources in the development tools. It sounds like Firefox can't find/read theme.mp4 or theme.ogg so is displaying the error message. Chrome can't find theme.mp4 either but is reading it's MIME Type it as audio/ogg rather than video/ogg.
You could try this page and see if it helps, the MDN always has useful stuff:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats