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
An application running on our company intranet used to use a jquery opacity animation to show a bunch of blinking indicators. As many of our systems are old and slow I updated this with an animated gif which drastically improved the responsiveness and page scrolling of the browser.
I then discovered that the majority of our users, who access the site through a terminal server, have internet explorer animations disabled through a group policy. Therefore they can't see the animating gif. It's hopeless asking the admins to enable this, they just cite performance issues etc. Is there any html code I can use to trick IE into allowing this image to animate? If not, what is the best (least processor / memory intensive) way of displaying an animation if I can't use a gif?
Going on the fact "blinking indicators" sounds like quite minimal animation, have you looked into css3 animations? Needs IE10+, though.
Also: JQuery is a big library for just an animation. Raw javascript may keep things smaller.
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'm trying to place html elements over a flash video which must be rendered with wmode="direct" (video occupies entire window with html UI to be laid over it, anything other than direct makes CPU usage surge).
I've tried using an iframe to include the flash video, but I'm still unable to place any elements over it. Is there a workaround to achieve this?
According to Adobe's wmode browser support matrix, all major browsers at current versions on Mac already support this use case. On Windows support is spotty, only IE 9+ is claimed to work.
Like you, I'm trying to find out if/when Adobe plans to extend HTML overlay support for wmode=direct in Windows browsers. The linked page only talks about Chrome up to 10 and FF up to 4, so more progress may have already been made since the doc was last updated.
If I find out something useful I'll add it to this answer, until then it's probably safest to assume you need IE 9+ on Windows to support direct+overlay.
We are finding that most browsers support HTML overlay when wmode="direct" - however no browser is able to support transparency overlayed on top of the flash. Not even PNGs can alpha blend correctly. Any pixels that have an alpha channel and ignore as if there was no pixel at all.
When creating UI to layer over the top of flashs we have to "blanket out" the SWF - or - use rectangular DOM elements (ie, no rounded corners)
Furthermore - IE 9 on Windows 7 and older version simply fail to overlay anything over the flash. Iframes seem to pierce the SWF, but HTML elements do not.
I need to display some interactive (attaching with DOM listeners etc. and event handling) vector graphics in web site I am working on. There is a W3C recommendation for SVG though this format is still not recognized by Internet Explorer support of which is a must (for a public website). IE handles VML though and there are even javascript libraries that do some canvas-like drawing depending on a browser (SVG vs. VML) - excanvas, GFX of Dojo Toolkit and more. That would be nice and acceptable though none of them can display an SVG image from the given markup.
So the question actually consists of several parts:
Are there any cross-browser Javascript libraries that display vector graphics from given markup (not obligatory SVG) and offer availability to attach to DOM events?
If there are not, which of the most pupular browser-embedded technologies would be most suitable for doing such a task? I can choose from Flex/Flash, Java applet. Silverlight is not an option because of Windows lock-in.
[EDIT] Thank you all for your comments/suggestions. Below are just some my random notes/conclusions on this matter:
The level of interactivity I need is ability to detect DOM events on the vector image being displayed - mouseover, mouseout, click etc. - and ability to react on them like changing background color, displaying dialog etc.
The idea of sticking with SVG format is quite well as it is native on many browsers except the most popular one - IE. After some experimenting with displaying dynamic SVG I realized that IE version 7 the most problematic. There's too much hassle because of browser incompatibilities.
Cake seems a great Javascript framework, though I could not get the examples working on IE7.
Java Applets - I liked that idea the most as I though I could use the Apache Batik library, a quality SVG renderer. However, Batik is very big library and I cannot afford deploying an applet that weights few megabytes.
I decided to stick with the Flex option. I found a nice vector graphics library Degrafa. It uses its own markup format however it recognizes SVG path notation, so in my case it is going to be quite easy to transform my SVGs using XSLT or just parsing them.
[EDIT 2] Some more comments appeared. I'd like to clarify that by "Windows lock-in" I mean the situation that Silverlight would normally run on Windows, more specifically, IE. I doubt it is an accepted solution (like Flash or Java Applet, for instance) on other systems. Yes, I have no doubt that one is able to launch Silverlight app on any system though I fear it would be too much effort for an average user.
#Akira: Have you had any problems with those "SVG renderers" on IE7? I get thrown Javascript errors all the time.
Safari, Opera and Firefox all support SVG natively (eg. without plugins) to varying degrees of completeness and correctness, including the ability to script the svg from javascript.
There's also the canvas element which is now being standardised in html5, and is already supported in the above browsers as well (with various quirks in certain edge cases due to relatively recent changes in the html5 draft).
Unfortunately any standards based approach is kind of destroyed by IE's willful disregard of what is happening outside its own ecosystem, however there are a number of libraries that try to convert canvas/svg into VML (IE's proprietary vector language) such as iecanvas.
[Edit: whoops, i forgot my favourite js library -- Cake! which can parse and display svg in canvas, and believe supports IE as well]
[Yet another edit: Cake actually has a demo doing what i think you want to do]
Take a look at the Raphael Javascript library. It's early days but it looks very promising.
I remember the IE roadmap that had SVG support listed in IE7.2.
Depends on how interactive you want it?
Can you clarify what you mean by the "Windows lock-in" thing with Silverlight? It runs on Windows and MacIntel, and the vector portions run just fine on Linux with the Moonlight plugin.
Were you thrown off by the lack of Amiga support?
Have a look at the new Canvas element which has been implemented in many browsers. I heard also that there is an ActiveX control for IE that implements the Canvas element too.
Update: Wait, you already said that. I should read the whole question next time! :)
Walter Zorn has a JavaScript library for arbitrary vector graphics. It looks decent.
IE supports VML, but nothing else does and it's ugly. Microsoft claimed that they'd dropped it (with new XAML and all) but it's still part of their Office XML format (it's how Excel .xlsx supports comments, weirdly enough).
FX and loads more support the new Canvas element. Many support SVG, but given the work MS are doing on Silverlight I can't see IE supporting SVG any time soon.
Microsoft are supposed to be providing Silverlight plug ins for no MS operating systems.
I've been using Flex - it's pretty good despite using Eclipse. You don't need to buy the hugely expensive Adobe server components to use Flex - it can consume SOAP services.
The dev tools for Flex are quite affordable, and nearly everyone has Flash.
I don't think SVG is a good choice for the future. From Wikipedia:
"The most common IE plugin was produced by Adobe. Adobe, however, are planning to withdraw this product at the beginning of 2009"
"... Internet Explorer which will also not support SVG in the upcoming version IE8"
"...all have incomplete support for the SVG 1.1..."
"The Corel SVG Viewer plugin was once offered from Corel. Its development has stopped."
Of all the possibilities you list, the only one that's not a horrible abuse of an existing technology (Javascript), barely supported (SVG, Canvas element) or a lot of work (Java) is Flash. It was designed as a vector graphics package and is compatible with more browsers than SVG and the canvas tag.
The only reason I wouldn't choose Flash over all other options is if you're aiming at mobile browsers or don't have the budget for the Flash package.
Go for SVG - and just tell the users to get the ADOBE SVG plug in for IE.
See this excellent site - which is a UK Government Site (public service)
ELGIN