I'm trying to create a html5 videoplayer on my site, but if when I try to insert the file like so:
<video width="320" height="240" autoplay>
<source src="gevelreclame.mp4" type="video/mp4">
<source src="gevelreclame.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
it doesn't work at al, I have another video file (also mp4) which just works when implemented in the same way
EDIT
both the files are not working now, i've changed only the filenames and they just don't work anymore..
Related
In html, how to see my video animation here on the website. I am using .mp4 on my video properties but it cannot be read on my site. The audio works but the video box is not showing up.
Source
Here is the code to insert video in your html document:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
Replace movie.mp4 with your video name
Reference: https://www.w3schools.com/tags/tag_video.asp
<video controls autoplay src="uniform_shop.mp4" type="video/mp4"> .
</video>
Im trying to the implement a video into my HTML code for a school assignment but, the area where the video should be comes up with a player but the video never loads.
The video is inside the same file as the pages so I don't knwo why it won't load.
As mentioned by Nikhil, you should first check if the path is correct.
Secondly, you should check if the video format is supported. Currently, MP4, WebM and Ogg are supported only.(Though this should not be the case as you are using MP4 format with correct MIME type)
If you are using the supported video then check if you have used the right MIME type.
For fallback, you can try this syntax:
<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>
Any text between the <video> and </video> tags will be displayed in browsers that do not support the <video> element.
For more info on this, you can refer to w3school.
Have you checked the path of the video properly?
The syntax is right, I guess you are giving the wrong path to the src attribute.
Or you can try this also (If the path is right):
<video width="400" controls autoplay>
<source src="uniform_shop.mp4" type="video/mp4">
</video>
I want to play .mov video like as this, but video doesn't play in any browser.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mov">
</video>
You can use below code:
<video width="400" controls autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
this code will help you.
Instead of using <source> tag, use <src> attribute of <video> as below and you will see the action.
<video width="320" height="240" src="mov1.mov"></video>
or
you can give multiple tags within the tag, each with a different video source. The browser will automatically go through the list and pick the first one it’s able to play. For example:
<video id="sampleMovie" width="640" height="360" preload controls>
<source src="HTML5Sample_H264.mov" />
<source src="HTML5Sample_Ogg.ogv" />
<source src="HTML5Sample_WebM.webm" />
</video>
If you test that code in Chrome, you’ll get the H.264 video. Run it in Firefox, though, and you’ll see the Ogg video in the same place.
Unfortunately .mov files are not supported with html5 video playback. You can see what filetypes are supported here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
If you need to be able to play these formats with your html5 video player, you'll need to first convert your videofile--perhaps with something like this:
https://www.npmjs.com/package/html5-media-converter
Content Type for MOV videos are video/quicktime in my case. Adding type="video/mp4" to MOV video file solved issue in my case.
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/mp4">
</video>
in the video source change the type to "video/quicktime"
<video width="400" controls Autoplay=autoplay>
<source src="D:/mov1.mov" type="video/quicktime">
</video>
You can use Controls attribute
<video id="sampleMovie" src="HTML5Sample.mov" controls></video>
My new answer is to use ffmpeg to transcode the .mov like ffmpeg -i sourceFile.mov destinationFile.mp4. Do same for the webm format.
OLD Answer:
Here's what you do:
Upload your video to Youtube.
Install the "Complete YouTube Saver" plugin for Firefox
Using the plugin in Firefox, download both the MP4 and WEBM formats and place them on your Web server
Add the HTML5 Video element to your webpage per MDN's recommendation
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8/VP9 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
Style the <video> element with CSS to suit your needs. For example Materializecss has a simple helper class to render the video nicely across device types.
Here is my code:
<video width="400" controls>
<source src="d:/lscweb/Presentations/2015-04-07 Ampersand.mp4" type="video/mp4">
</video>
But when I load up the page I get "Aborted" in the video player. If I do this:
<video width="400" controls>
<source src="d:/lscweb/Presentations/2015-04-07 Ampersand.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
I get "Invalid source". I assume it's trying to look up the mov_bbb.ogg file which doesn't exist. But I want it to play the first one. It's mp4. Why won't it play?
You can't use link references to absolute windows os paths.
I suggest you move the video to the same folder as your html document and just do src="video.mp4" to avoid needing to use complex relative paths.
Recently I started a college project where I would have a video as a background on my HTML5 index page. I had it working perfectly with a stock video but when I made my own video and converted it to .mp4, .ogv and .webm all I get now is the blank black screen. I see no fault in the code:
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">
<source src="backgroundvideo.webm" type="video/webm"/>
<source src="backgroundvideo.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/>
<source src="backgroundvideo.mp4" type="video/mp4"/>
Video not supported
</video>
Could it be the movie converter I used? I used Miro Video Convertor.
Provided the videos are stored in the same directory as the HTML, and you have the filenames correct, this should be fine. If you've tried it in several different browsers (I assume you have) then, yes, it's probably the video encoding.