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.
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.
If you visit a site that uses Flash, and you don't have Flash installed on your browser, a message will be shown to you to install Flash. A similar procedure happens when Silverlight is involved instead of Flash.
What happens if a browser does not support HTML 5? Will I have to install something to get HTML 5 support in that case? Is that even possible?
Browsers will ignore elements it doesn't support and it won't apply css styles to those elements either. You won't get any explicit message that the browser doesn't support HTML5. You can, as the page author, provide your own message if the browser doesn't depending on the circumstance. You can, for example, provide a message that will display to the user inside a video or audio tag.
Well what happened earlier, wenn browsers supported HTML3 and you used HTML4? Nothing really, and that's what's going to happen for HTML5.
Flash and Silverlight are handled using browser plugins, so the browser can warn you if the plugin is not installed. HTML5 is not a plugin, so what you could do is to use JavaScript and check for the browser version.
Users won't get a message if their browser doesn't support certain html5.
What you could do is check what html5 or css3 you need, and look at http://caniuse.com/ wich browsers are compatible with those functions and then use a script to give older browser users a notification to update to a newer browser.
but what happen if a browser does not support HTML 5 ?
Exactly the same as what you described:
If you see when a site uses flash technology ,and you have not flash
component installed on you browser, a message will be shown to you to
install flash(same as silverlight)
This feature detection has absolutely nothing to do with HTML5. It's the implementation of the <object> tag that allows you to specify an url to download the component from if the browser hasn't installed it. It is a browser dependent implementation though.
#Ali Foroughi I didn't notice a clear cut work around if you have HTML 5 elements in a website and how to get older browsers namely IE 8 and older to display the new HTML5 elements. Other answers are true that the HTML5 element won't display correctly or at all but what can be done about this.
There a couple things you can do to either "teach" older browsers to handle HTML5 correctly either by CSS, JavaScript, or an HTML5Shiv. These methods are explained here.
Of course these can't be implemented by the end user but by the websites designer/developer.
Was searching for the answer as to a work around in case someone has an older browser and HTML5 elements are used. I figured if there are work around's for certain CSS styling by using some sort of webkit in the CSS file surely there is for HTML5.
I want to apply wmode=direct to flash objects on my page.
What are the behaviour it will accomplish in older browsers (IE6,IE7,etc.)?
Or the older versions of Flash Player?
Does the parameter behave as default(window) or transparent?
The documentation doesn't explicitly say, but as per Flash OBJECT and EMBED tag attributes:
Explicit layering control is only supported with some modern browsers (see table below). In other browsers, the SWF content always appears above other HTML elements.
This sounds like opaque:
The SWF file is opaque and hides everything layered behind it on the page
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