Has anyone got HTML5 canvas clipping (http://www.html5canvastutorials.com/tutorials/html5-canvas-clipping-region-tutorial/) work with explorercanvas (http://code.google.com/p/explorercanvas)?
I have an HTML5 page using clip() and to support older IE bowsers, I am using explorercanvas. But I couldn't get clipping region work on it. I am looking for a solution or workaround for this.
clip() does not work in explorercanvas (excanvas.js).
Issue Reference:http://code.google.com/p/explorercanvas/issues/detail?id=36
Related
I am doing a project where I have to display video using Flash OSMF player. Also I have to display some text and image on top of the player.
It's working pretty cool in chrome and IE. When it comes to Firefox and safari the text element is hiding behind the video player. I have z-index CSS property to make it to the front but no luck it's still hidden in the background .
I have a live site http://www.tallenge.com/alcy-caluamba/all-categories1/general23/lecrae-i'm-turnt--choreography-by-alcy/vote
Since it is not working in Firefox I have changed the player only for Firefox and safari to html5 player in live site, so that it is displaying text as expected. For testing you can take player code(under medidplayer element) from chrome and replace it in Firefox - you will get the issue I have mentioned above.
Any help/suggestion would be greatly appreciated .
Thanks in advance ...
This problem can be related to the wmode setting of the Flash player object, see the Adobe documentation of this setting:
https://helpx.adobe.com/flash/kb/flash-object-embed-tag-attributes.html#main_Using_Window_Mode__wmode__values_
You can try using wmode="opaque" as a param of the Flash object:
<param name="wmode" value="opaque"/>
However according to the Flash docs in that mode the plugin is not able to take advantage of hardware acceleration.
Unrelated question, if you already used the HTML5 video tag as a fallback for Firefox, why Flash? I'll take the opposite direction HTML5 video tag by default, Flash as a fallback for old browsers.
Is there any point in using SVG Web, if I render SVG only for browsers that support SVG anyway? (IE9, Chrome, Firefox, Opera.)
Perhaps SVG Web fixes/works-around some browser inconsistencies? (E.g. different SVG API:s or browser bugs, like jQuery does)
((Background: I already use SVG Web, and wonder if I should attempt to remove it from my webapp, it's 100k minified. For IE 7 and 8, I use PNG images instead.))
Not really.
AFAIK it doesn't do that, unless you force all browsers to use the flash renderer, which seems a bit pointless.
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.
Is there a way to make a grayscale image in chrome via css?
I have tried this but doesn't work on latest version of chrome
support for native CSS filters in webkit has been added from the current version 19.0.1084.46
so -webkit-filter: grayscale(1) will work and which is better and easier approach than SVG for webkit...
Another solution would be svg with a level of indirection.
Basically, <img src="wrapper.svg"/> where wrapper.svg applies an svg filter to the svg, and the svg has an image element pointing to your raster image. Works in Opera, Chrome, Firefox and probably IE10 (untested).
Here's a demo. You can pass in your own url if you encodeURIComponent it first. Note though that for passing in parameters to work it relies on scripting being enabled, so if you need to use it in <img> elements or in a css background image you'd need to generate the svg files on the server.
Not yet, but Chrome 18 will support css filters (released later this year). SVG filters is only supported by Firefox. You should be able to find a consistent canvas+javascript solution though.
EDIT: See Erik Dahlström's post for alternate solution.
Here's an HTML5 solution. Supported by current versions of Chrome: http://webdesignerwall.com/demo/html5-grayscale/
Is it possible to draw with your finger using the iPhone or iPad in HTML5? If the user were on a PC then the user would need to be using a mouse for the same effect.
Yes.
Check out deviantART's new drawing tool Muro for an example, and Apple's Safari DOM Additions Reference for an overview of the API.
It sounds like you're looking for something along the lines of SketchPad. It uses a <canvas> element in browsers that support it (and fakes it in IE).