I am trying to develop a simple webpage with all the newly added basic elements of html5. While working with the video tag, I see that some formats like .avi are not supported.
So is there a list of video formats supported by html5?
Even if a particular format like WebM/ogg is supported by html5, is it safe enough to presume that the browser used will be capable to display the video?
There is no universally supported format (yet) unfortunately. Technically, HTML5 doesn't support any video formats, it's the browsers themselves that support specific video formats. This has led to a giant mess.
You can find a list of format compatibility on Wikipedia. From that, VP8/WebM is likely your best bet if you only want to support a single format. Luckily the <video> tag does support fallbacks if providing more than one encoding is feasible for your uses, in which case a VP8/WebM version combined with a H.264 version covers every major browser.
For multiple versions of the same video, you can use the following code:
<video width="320" height="240">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.ogv" type="video/ogg" />
<source src="myvideo.webm" type="video/webm" />
<p>Other backup content, eg. a flash version, should go here.</p>
</video>
There doesn't seem to be a single video format that is supported on all HTML5 capable browsers today. There's basically two formats that compete over being the one:
WebM - Supported by Firefox, Opera, Chrome, IE9 (with plugin)
H.264 - Supported by Safari and IE 9
So at the time, I think you'll basically has to provide the video in two formats and guess the browser to feed it the correct one.
Related
I've been reading about embedding videos for my HTML page with multiple sources to maximize support for multiple browsers. However, as in my example below, when we add 2 sources in 2 different formats (MP4 and WEBM) and add a fallback content just in case that the browser won't support both of those formats,
I've seen that the same kind of format (MP4) is used in the hyperlink of the fallback content. I know that fallback content appears only when both sources we add won't be supported by the browser.
Question:
If that format would work with that browser, we wouldn't need the same format we add in the fallback content. I'm confused about how things work there.
<video controls>
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a link to the video instead.</p>
</video>
More about this example you can find here: Media file support
The fallback content is for browsers which don't support the <video> element, not for those which don't support the formats the <source> elements provide.
… and even if a browser doesn't support the format for internal playback, it can still be opened in an external video player by the user.
Right now we are using HTML5 players for our mobile sites, so we have list of all handsets in our database with supporting video format. So for each request we query database to find what format that phone will play ,example (Samsung J500 : mp4)
We need to remove this dependency and want the player/browser to detect the format and play, we have mov,mp4,3gp,asf video formats with us.
What is the best way of doing this , given we only knew about the browser ? Our target is to cover maximum handsets to play best quality video that a handset supports .
If you need to support old devices, what you currently do seems like a good idea. However, if the device is old enough that it requires a "special" video format, I doubt it supports HTML5?
Since your question specifically mentions HTML5, you can list multiple sources in your Video element. The browser will go down the list until it finds a source it can play.
<video controls>
<source src="Cat.ogv" type="video/ogv">
<source src="Cat.mp4" type="video/mp4">
</video>
See Using HTML5 Audio and Video and HTML5 Video Fallback
Every tutorial/explanation I see out there that discusses HTML5 video format fallbacks use this type of markup as an example:
<video autoplay>
<source src="/myvideo.mp4" type="video/mp4">
<source src="/myvideo.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>
So my question, why does everyone suggest to put the MP4 before the Webm format? If your browser supports Webm, it almost definitely supports MP4... The above markup essentially ensures that the more efficient Webm video will never be used, even though it has arguably better compression and will reduce bandwidth. Why is this?
Am I missing something about the way video fallbacks work?
It has to do with backwards compatibility with iOS 3 devices. iPads running iOS 3 had a bug that prevented them from noticing anything but the first video source listed.
MP4 video type was the only supported video format, so if the mp4 version of the video is not the first source, it is ignored.
So, if you want to deliver video to iPad owners who haven’t yet upgraded iOS, you will need to list your MP4 file first, followed by the rest of the video formats.
Read more
See how it links to a .ogg and a .mp3? Why is that? All the examples and applications I've seen do the same thing. Is it necessary to have two sources?
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
No, it's not necessary. The different sources are just possibilities to be tried in order; not all browsers are guaranteed to support all formats, and so you provide fallbacks.
(If you only want to provide one, the src and type can go directly on the <audio> tag, too.)
Not all browsers support the MP3 or OGG format, so both are usually included to insure cross-browser compatibility.
The Wav format can also be included, and unlike MP3 and Ogg, it supports every browser (minus Internet Explorer).
MP3 works with Internet Explorer 9+, Chrome 6+, and Safari 5+. Ogg works with every browser, minus Internet Explorer and Safari.
So the combination of MP3 and Wav, or MP3 and Ogg, would play the HTML5 Audio on virtually every major browser. Of course, it's a bad idea to include Wav and Ogg as a combo, due to the fact that Internet Explorer requires MP3 as a format.
So the multiple tags are included as a fallback.
Hopefully in the future, all the major browsers will support all the formats. Currently only Chrome does.
(Hope my answer doesn't sound like a tongue-twister.)
To make it simpler lol.
Firefox doesnt support mp3 (idk if they still dont)
So to make your player function in firefox you need the ogg as a backup.
Firefox will skip the mp3 and try to find the ogg.
I have no idea why this isnt working.
<video src="American.avi" controls="controls">
<object data="American.avi" type="video/avi" />
<embed src="American.avi" />
All of the above tags return either "Missing Plugin" or have video controls that dont load a video. There is no link to install the missing plugin on chrome, there is on Firefox but it says no suitable plugins were found.
Any suggestions?
If you are trying to ensure a wide range of compatibility across browsers, then I believe the suggested method of embedding video using HTML5 tags is as follows;
<video width="480" height="320" controls="controls">
<source src="American.ogg" type="video/ogg" />
<source src="American.mp4" type="video/mp4" />
<p>I'm afraid that your browser does not support the video tag.</p>
</video>
AVI is a video container, and could contain video in one of a wide variety of formats. As such, I believe it's preferable if you can convert your video to .ogg and .mp4 formats to ensure compatibility across a wide range of browsers.
To clarify, the above code will show a single video player which will use any one of the provided source methods (but only one). So you can provide multiple formats for a given video window and the browser will pick which of the source elements that it can display and it will display that. So, with the above code, if the browser can play the .ogg version of the file it will, otherwise it will try to play the .mp4 file instead.
Browsers generally don't support AVI. The choice of containers and codecs you have is limited, partly deliberately (because lots of formats means lots of potential security holes) and partly due to unfortunate limitations like software patents.
To get cross-browser-compatible <video> you will need to provide MP4 and one of WebM or OGG Theora. You can also use the MP4 video in a Flash player as a fallback for browsers that don't support <video>.
See this table for which browsers support which formats.