How to load video in my website - html

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

Related

video in html5 is not working in all browser

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

Trying to add a video into html but, the video won't load

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

HTML5 Simple Video Player. What did I miss?

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>

How to view video in html5 tag?

I would like to ask question about how to play a video on my browser. When I try to load my video file to my browser it displays nothing. My teacher said that maybe it is because the browser is not supported by html5.
What is your idea guys. I am hoping for your positive response.
you can try this one:
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
Big Buck Bunny.
</p>
</body>
please Refer This pages
SEE THE PAGE
If your teacher say your browser doesn't support html5.
Try double check in your browser eg. if you using chrome
Go to Menu --> Setting --> About and if it say need to be updated then click update.
Chrome support with html5 tag. Really weird if it not.
More info can check here https://html5test.com/results/desktop.html
For the coding part
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
It work and i already do a test here the display
Hav you tried to use it by
video tag,
<video id="samp" src="sampvideo.mov" controls> </video>
this should it work

Chrome No Longer Supports HTML5 Video?

I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls