I would like to use html5 video on our site but wanted to find out if there is any way of adding support for IE6 seeing that some of our clients use old browsers. I am not sure if I inherit the js "modernizr.js" whether this will solve my issue. Please advise or may you please suggest an alternative besides flash?
Straight answer? You simply can't use HTML5 video in old IE.
You'd be best using a jQuery solution. There's a great plugin which handles all this leg-work for you called jPlayer:
http://www.jplayer.org/
Check it out.
As already suggested in the comment above, you should utilize some kind of fallback to Flash and/or Silverlight for browsers non capable of HTML5 video.
For example have a look at mediaelementjs, which is working well and has support for IE 6. There's also a chart on their website indicating which technology is used in which browser.
Related
I never thought, I'd have to ask THIS question:
Is there a cross-browser way to play background MIDI files in a website without the need for a plugin?
(Now, please don't answer with "don't do it! it's annoying as hell!". It's for a kids-page and they love this stuff... And I will give the option to turn it on or off...)
I've found several approaches, each with their own problems:
<bgsound ...>-tag: IE only; must be careful not to use with other tag that IE might interpret also
<embed ...>-tag: Doesn't work in Chrome. Firefox requires a plugin, which it can't even install automatically...
<object ...>-tag: Chrome and Firefox require a plugin. Both suggest QuickTime, but neither installs it correctly...
<audio ...>-tag: Requires HTML 5; also not sure if it supports MIDI across browsers...
use a Java applet: Not available everywhere, and seems like overkill
Is there some way to make this work across browsers (minimum: current Firefox, Chrome, Safari, Opera, IE6+, Android, iOS) without requiring any plugins? Probably some clever mix of all the tags listed above?
I am really surprised that this seems to be so difficult. Is MIDI deprecated? Or background-audio in websites in general?
Why not HTML 5 Audio. After all it is supported in all latest browsers. ( Firefox/Opera can have problem with H.264 files ). And in case of Mobile browsers it should more better choice.
One option you may want to pursue is SoundManager2. An audio project based on JavaScript. I use it in many of my web projects and so far it seems goood. Requires a little bit of a learning curve, but the API is very rich and clear and how to install it and use it for various situations.
http://www.schillmania.com/projects/soundmanager2/
By building a JavaScript package for audio within your web site, you won't have to worry about additional plug-ins that front-end users may need to have for their machines. It works with old and new browsers, MIDI files, MP3's and more.
I have a HTML5 video, working fine, and i'm happily smiling whenever i start my browser... However!
I know the Video tag isnt supported by some browsers, but i noticed there is a difference in support for video attributes/methods/whatever too. Is there a summary of this somewhere?
For example:
The poster attribute doesnt work in every browser, even if the vide DOES work!
I think its pretty worthless to just use an entire javascript library to take care of one attribute like poster, so how to take care of this?
Or am i completely wrong, and is IF video is supported, also every attribute supported the same way?
Please help me! :)
Thanks for all your advice,
WK
ps: I am using the video for everybody variant of the video. So thats working fine.
Is this the kind of thing your after?? click me.
Basically there is the following support for the HTML5 video tag:
Every modern browser that has support for HTML 5 supports <video>
meaning: IE9+, FF3.6+, Chrome, Opera, Safari
Internet Explorer 9 does not support the poster attribute. I believe
there is even a bug about this on Microsoft connect.
Firefox does not support the loop attribute. (replaying a video after it has finished)
Different browsers support different video formats, IE9 supports
H.264, Firefox supports ogg (Theora) and WebM etc, which means that you would need to provide all formats in order to be compatible with all browsers.
The rest is pretty much supported everywhere.
well, HTML 5 is not yet standardized. Due to this, every browser that support html5 works differently. As far video tag is concerned then you have to provide with different formats so as to get support on various browser list. You can test browser support on this site. Here you can get all the details about the extent your browser support to HTML5
I find this page a good resource (although it is starting to get old as it was earlier this year): http://www.longtailvideo.com/html5
On a separate note, I find if you go to mobile devices such as Android the browser support varies greatly per device. Even though they are "supported" I always get strange behavior.
As for poster, there is no good solution if you want to have support across all browsers.
I was thinking id there are any javascript or other type plugins that will add css3 and html5 support to old browsers (especialy ie). I couldn't find any on google. The thing is that I really enjoy using css3 for styling instead of using images etc... I't all good, but as you know it doesn't look good in old browsers, so I was wondering if there is anything that could be done here?
try this: http://www.modernizr.com/
There's a list on the modernizr page with many so called polyfills for all the new browser technologies: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
I want to create a webPage using HTML 5 which will use all the attractive features of HTML5 i.e. audio, video, autofocus, placeholder, required, email, url, number etc. and the webPage should also have support for the browsers which dont support HTML5 like IE or some versions of other popular browsers such as Chrome, Firefox, opera etc.
How do I start working on that, as You might guess that this is just for the experimental purpose and I am supposed to it asap... so please suggest me any help, site or blog or tutorial or example.. I have seen hhtml5Doctor.com and diveintohtml5.ep.io ... the sites are of great help...
Use progressive enhancement. The diveintohtml5 already tells you how: http://diveintohtml5.ep.io/detect.html
html5boilerplate is a good start, it includes modernizr/html5shiv for barebones support of the new elements.
Other things may need javascript/flash fallbacks.
You can make use of the fact that browsers will ignore tag that they don't understand. So, for example, you can have an audio tag and inside that put an object tag for a flash audio player. The HTML5 browser will understand the audio tag and do the right thing, and ignore the child content. An older browser will see the audio tag and throw it away beacuse it doesn't understand it, but will render the child contents of the tag instead (the flash player).
swfobject and Modernizer are really nice tools... u must give them a try... I would personally recommend swfObject due to very good support.
I want to use HTML5 because it supports in Iphone also and I really liked its capabilities but what can I do if it is not fully compatible with all browsers? Specially IE family. So is there a way by adding some js script e.t.c. so that HTML5 and its js api work normally in IE also as it works on other browsers like chrome, firefox and opera e.t.c.? So that I can use it without thinking of browser compatibility issues. There are also many game engines in html5 but what if this is not supported major IE browsers. Or can some one tell that how much advantage can I take of html5 without thinking of compatibility issues?
Thanks in advance
You can use http://html5boilerplate.com/ together with http://code.google.com/p/html5shiv/ and you're good to go.
For some other cool features, like video in old IE, you need to use workarounds like Flash for video and Javascript libs for canvas.
Simply put, if the markup is valid in HTML 4, change the Doctype and it will work as HTML 5.
If you want to use the new elements like <article> or <footer>, you will need to include a small javascript snippet in order to register those new types.
document.createElement("article");
document.createElement("footer");
This will make these new elements usable and stylable like an ordinary <div> element
Polyfills let you use new HTML5 apis on older browsers. The Modernizr project keeps a list of good ones: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills