I'm looking for a resource on what browsers currently support the tag. What alternatives are there? and is it in any way usable on a mobile phone, I have a hard time seeing that the text would be readable. On tablets with bigger screens it would make more sense.
Thanks.
This is the best table I've found so far for summarizing support across browsers: http://www.longtailvideo.com/html5/#texttrack
Caniuse.com is excellent for finding out what browsers support what. This is the link for the video tag
Related
I have a question regarding old version of iOS (especially 8.3) and html5 tag <picture>. I cannot use it for old iOS devices.
Do I have any chance to trick iOS or is it possible to have some hooks to make it work properly?
Thanks.
If you do not mind a javascript solution, Picturefill will enable support for the <picture> tag in browsers that do not support it. I have used it myself for various projects in the past, and it is a drag and drop solution that works without issue.
https://scottjehl.github.io/picturefill/
The <img srcset... attribute allows different images to be shown to the user dependant on screen resolution.
Which browsers currently (Jan 2013) support this attribute?
Given that this is a useful attribute for users browsing on smartphones, additionally, which mobile browsers offer support?
Updated Feb 2014
There are various aspects to srcset, including pixel density and viewport width. At the time of writing:
viewport width isn't supported by the current versions Safari, Chrome or Firefox
pixel density is supported by Chrome
I've put some test files and results on a Github repo which I'll try to keep current.
Webkit is now supporting the srcset attribute: https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/
Interestingly, wikipedia seems to be using srcset with attributes like this:
srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/300px-Izokefalizm.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Izokefalizm.jpg/400px-Izokefalizm.jpg 2x"
I'd guess they are using a polyfill to achieve this, but it certainly is displaying larger images correctly. Might be worth poking around.
For iOS devices - Safari for iOS8 now supports srcset - but won't be generally available until the Fall 2014.
http://friendfeed.com/christianoliff/c7c40ae2/safari-for-ios8-now-supports-img-srcset
Have a look for the current support at CanIUse.com. As of now, October 2015, if you don't care about IE as much, you can safely use it on pretty much all browsers, good stuff!
A "correct" answer would have to evolve over time.
A candidate test site: https://html5test.com/compare/feature/responsive.srcset.html
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 have a problem that I want you to help me, I am currently making a website, I am building that website on HTML5 and CSS3 technology, every feature I'd like to use I check it first in "CAN I USE", the technology I use most is box-shadow, and I already made some great things with it but, I have a doubt about the percentage of browser that don't support that technology, the percentage of browser that do not support box-shadow is around 17.12%, and if you see the conclusions (show options => other options => show conclusions) they say that that feature isn't ready yet because they are "Waiting for Opera Mini 5.0-6.0 to expire", I personally think that the best that we can do in order to make people update their browsers is not support older browser, but ...
am I right thinking like this?
will I have bad consecuences if I don't support older browsers?
is worth to work twice just to support older browsers?
should I still working with box-shadow?
As always....
Progressive Enhancement.
Build your site so it works well for everybody regardless of their browser settings and capabilities. Then add features that enhance the experience but don't cause the site to break for those who cannot take advantage of that feature.
Some CSS3 elements(shadow, rounded corners,...) will not work in older browsers. That's a fact, but you can still use them as the mentioned browsers simply ignore this attribute.
Best way would be that the design of the website doesn't rely on the shadow and other effects, but only to enhance it.
Also take into account the market share of the browsers that don't use these elements. Opera's got a tiny share on the desktop market, and a little bigger on mobile devices, but in no case is a major player. Pre 8 Internet Explorer will give you the most headaches...
I completely agree with John Conde,
Do you want to make a website to teach a lesson to people who still use old browsers?
Or are you seeking more visitors?
Start with a simple design that everybody could use, and then improve it for modern browsers while keeping old browsers in mind.
Are there resources or JS libraries to emulate HTML5 features, if the browser doesn't fully support HTML5.
I am specifically looking to target mobile web applications.
Thanks,
Sri
Maybe you should give a try to HTML5shiv.
Modernizr is a library for detecting support for HTML5 and CSS3 features.
It doesn’t do any automatic fixing itself (I don’t think so anyway...), but it’s a solid base to use for adapting your application to browsers that don’t support what you need.
Not sure how well it runs on mobile devices — JavaScript performance tends to be pretty slow on mobile.
Most mobile browser don´t have good js support. So it´s difficult you can emulate HTML5 or anything.