I was wondering if anyone knows if it's possible to have a fallback image for the poster attribute in the video tag. I couldn't find anything about it.
Currently I'm just using a png, but I'd love to use a webp so the page can load faster. The poster is just there for slow connections when lazy loading, so that the page still makes sense and can be read without the video ever loading. So the image has to be of high enough quality in case the video never loads and as it's a portfolio website, there's only so much quality I can sacrifice. Looking to have a fallback as Safari still doesn't support webP.
Unless there's another image format that I've missed that has universal support (at least with modern browsers) that has comparable compression.
I tried also without success: it seems that the fallback is only displayed on old browsers only and not on the récents: Otherwise it is necessary to manage in js the non loading of the video
Related
I'm designing a website, and I have some vectors (colored vectors for landscape). I always had a concern about using SVG due to the browsers compatibility.
As we are in 2020, Is SVG fully supported now with all of its details in all browsers (web, mobile) ? or still working only for the basic vectors those don't have much details ?
Should I trust it for a website that will be used widely whether via web/mobile ? or better to stick with JPG / PNG ?
All browsers have excellent support for SVG. You should have no worries about using it.
However you may want to avoid relying on some of the new bleeding edge features of SVG 2.
SVG 2 has not been finalised yet, and browser support for some of the new features is mixed.
As a resume of this post, pretty much all the modern browsers support at least partially SVG. You should definitely use it for simple images, but it's not wide supported for animations for example.
Note that some small display issues can happen, even with images. More information about it on this page.
I'm a little confused by this one. A similar question was posted here:
How to deal with poor HTML5 video performance in Chrome?
but no satisfactory resolution seems to have come of it.
The long and short of it is that the HTML5 video element has a very poor performance in Chrome. Every other browser I've tried (IE9/10, Opera, Firefox, Safari, Safari iOS) runs absolutely fine but Chrome (for Windows) buffers very slowly and occasionally stops buffering altogether. It seems to ignore the preload attribute, although according to this article:
http://oddlystudios.com/blog/html5-video-problems-in-chrome/
it DOES preload, just limits itself at a couple of MB. This is definitely a recent thing, probably only affecting recent versions (I'm on 26.0.1410.64 m) and it's not only affecting my projects but also other sites including YouTube. It seems to be irrespective of file format, and only seems to affect longer videos (those of 5 minutes and above).
I guess my question is, has anybody else come across this phenomenon? If so, how do you combat it? In the other thread disabling the hardware acceleration for H.264 was suggested, but not only does this not work for me, but it's impractical from a development standpoint.
Yes Chrome itself preload just few of MB's among its entire video. The only approach taken by me was, to show loading progress bar while we load the entire video at background. once fully loaded the video, remove the loading layer and show the video to play ahead.
I've been using flash video for embedded videos on my site. My old 2.2.x android plays them fine but I'm noticing a lot of new android devices as well as apple devices will not play my videos because flashplayer is fading, so I'm investigating the solution - and HTML5 video seems to be the new thing.
I've just spent 2 hours searching google and read a lot of stuff but most of it is from 1, 2, or 3 years ago -- and judging from what I've read it looks like using the html5 video tag still requires each video to be converted to multiple formats, and full screen is some sort of vendor specific extension -- different on each browser which happens to support it.
So my question is whether HTML5 video tag is a full replacement for the flash player now, or is it still a kludgiferous scheme requiring browser specific hacks for half a dozen most popular browsers -- in 2013?
Does it work on PC's, Macs, Androids, and iPhones?
caniuse.com is a great resource for pretty good data to answer this question.
As of now...
~92% of web users' browsers support the HTML video tag. The main one that doesn't is Opera Mini (about 4.5%). For those users, you can use a Flash fallback, which is actually not too much work. There are a handful of very simple solutions that will handle this for you, like videoJS, jPlayer and JWPlayer.
For now, you do need to encode in two, possibly three formats. About 92% of users support MPEG-4/h.264. Opera Mini and IE8 do not support it.
Only about 71% of users can support full-screen HTML video, so for Android and iOS (mainly), all versions, the best you can do is set the video to fill 100% of the browser window. If full-screen is that important, then you'll want to use Flash.
So, in short, yes, HTML5 video does require a little extra work, but at this point, it's not that hard to get right, and it's a standard that's moving in the direction of better stability and uniformity. YouTube, for example, uses it (with fallbacks), if that's any indication that it's ready for prime time.
I have designed a layout in such a way that I can make most of the images using CSS3 (using gradients, etc) I want to make as much use of HTML5 and CSS3 possible. But I can't ignore the browsers that don't support them yet. So, I was wondering is there a way to detect a browser first and then if it is a non-HTML5/CSS3 supporting browser, the code will load the images and if it is an HTML5/CSS3 supporting browser, it will use advanced code instead. This will save a lot of loading time for them.
What are your views about it? Is this a good approach? How to detect browser before anything else loads on the site?
Check out HTML5 boilerplate, it was made to address those issues very toroughly.
Also CSS3Pie can be used to add CSS3 support for IE.
I forgot wether its part of the HTML5 boilerplate or not.
Animated PNG images (APNG) have been around for quite a while in an attempt to add this functionality of the GIF format to PNG images. According to Wikipedia they are supported in Opera (>= 9.5) and in Firefox (>= 3.0). The first frame in the APNG animation is displayed if a browser doesn't support APNG images, since it was defined as an extension of the widely supported PNG format. Suppose you have an animated PNG that you want to show in your site and you want to warn your users if their browsers doesn't support it. How would you do it?
Make the first image display for a very short period of time, and have it be a big, ugly error message.
If the first frame isn't a useful image, and the animation is crucial, it's probably too early be using them in your website. Better to wait until more browsers support it.
If for some reason they're vital and must be used then I'd include an error message in the first frame like Adam Jaskiewicz suggested, however, users that support APNG will see the warning for a brief period of time.
Apparently support can be detected as in this article on Ajaxian