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>
Related
<!DOCTYPE html>
<head>
</head>
<body>
<video width="400" height="400" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.mp4" type="video/ogg" />
Your browser does not support video tag
</video>
</body>
to wrap it up:
I was trying to solve this problem in the last few days, so I give some additional information:
I know mp4 is supported by Chrome
2.my video file is stored in the same folder as the html file( with the same directory)
3.some other programmers suggested using iframe so don't recommend this
the same problem goes for my audio files
when I write a http source instead, it does not open again.
I also tried writing in the code controls="controls" too.
I know I left the title part, my focus is on the body
I wonder what the problem is. I really appreciate if you help me to figure that out.
thank you in advance.
Google Chrome disables auto-play audio, so it can't auto-play video. To give autoplay, add a "muted" attribute.
<video controls autoplay muted>
I Found the answer to this question, in case you want to insert images, videos or audios you should take care of the directory your files are saved in, if they are in the same, which should preferably be, use this: ./image.png
I use this (HTML file):
<video width="480" height="320" controls="controls" autoplay="autoplay">
<source src="Video.mp4" type="video/mp4">
</video>
Video file located in the same folder with HTML page and seeking bar work perfecly.
But,
I try to do that (HTML file):
<video width="480" height="320" controls="controls" autoplay="autoplay">
<source src="http://localhost:32750/Resources/Video" type="video/mp4">
</video>
And in the controller (MVC):
public ActionResult Video() {
return File("Video.mp4", "video/mp4");
}
Video plays correct, but seeking bar doesn't work! I very surprised. Think tnat "video" component "think" that this is video stream, and don't work.
Any ideas?
In your second case the video is actually being streamed from the local server (assuming your localhost server supports streaming) - so it will behave in the same way as a regular video file being streamed.
There are ways to have a seek bar with thumbnails in a streamed video - you may need to have a separate thumbnail track to get the functionality you want, depending on your requirements.
<html><body><video src="C:\Users\vps\Desktop\v.mp4" width="50%" controls>
<p>If you are reading this, it is because your browser does not support the 'video' element. Try using the 'object' element listed further down the page.</p></video><p>If you can see the video controls but the video doesn't play when you click the "Play" button, your browser might not support this file type (i.e. <code>Ogg</code>). In this case, try the same code, but with a different file format.</p>enter code here</video></body></html>
Hope this helps:
<video width="300" height="400" id="vid" controls>
<source src="https://developer.apple.com//live-photos/assets/boy.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
Refer the below link, This will explain about adding video file.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
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
I have a background video which plays offline as it's expected but it's not playing online.
this is the html code:
<video autoplay poster="vid/TD.jpg" id="bgVid" loop>
<source src="vid/TD.mp4" type="video/mp4">
</source>
</video>
this is the actual website itself if you want to see it so for your self.
Well, your markup looks correct, but the video is coming through as a 404. Double check your path to the video and the capitalization of the file name, too. Resolve that, and I bet your video starts working.