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.
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.
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
For some reason, my video on wordpress wont show up when I use iframe to view it. In I.E., it automatically loads the video into the windows media player versus playing through the iframe.
I am using a local mp4 for the video's. From what I can tell, there's no issues with my I-Frame code. Anyone got any idea's? I cant get it to play in the iframe!
You should not be using <iframe>'s like that. In the past it was a relatively more popular method, but extremely unreliable even back than.
What you should do instead is either encode your video's as .flv's and use flash to play them, or encode them for the 'new' html5 <video>-tag for which no additional plugins are required. To get the best results with the new tag you should convert for 3 different codecs, but H.264 gets you quite far. This is how it ends up looking if you have converted multiple formats:
<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 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
And you can read more about it here.
I have the following code:
<div class="span4">
<video poster="assets/img/poster.jpg" controls="controls" width="420" height="420">
<source src="assets/videos/152638831.webm" type="video/webm" />
<source src="assets/videos/152638831.mp4" type="video/mp4" />
</video>
</div>
The video works in both Firefox and chrome, but in Chrome, it's very very grainy. I don't think it's an issue with my video because when I navigate to http://www.w3schools.com/html/html5_video.asp using Chrome, the video under the section called "DOM Methods and Properties" also appears grainy. When i say grainy, I mean, I see yellow, green, blue and red lines / dashes spattered across the video.
Can you tell me what I'm doing wrong?
Also, is the idea behind having multiple source tags that depending on the browser, it will select which file to play? In my case, I know firefox doesn't support mp4... I tested it. but the above code works in firefox. So I'm assuming it's playing the webm version of the file. Is this correct?
Thanks.
First of all, Chrome should be able to read the mp4 so perhaps you didn't use h264 compression.
You should check on that.
Second, you must include compressed ogv, and webm versions of the video.
Each browser supports a different video format at the moment so we have to include them all so that no one gets left out.
Here is a handy chart for browser video format support :
http://www.longtailvideo.com/html5/#media_formats
Don't forget the flash fall-back either, just incase someone with a dinosaur browser that doesn't support the html5 video tag needs to see the video too.
Here is a handy chart for video tag support :
http://caniuse.com/video
Let us know how you get on.
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.