“How are you going to finest embed Flash content material?”
Article Continues Under
It must be a easy query, however is more likely to evoke lots of totally different opinions and arguments, as every of the various obtainable embedding methods have their very own professionals and cons. On this article, I’ll look into the complexities and subtleties of embedding Flash content material and study the preferred embedding strategies to see how good they are surely.
The important thing elements of an incredible Flash embedding methodology#section2
Earlier than we get into the nitty-gritty, let’s first outline our very best Flash embedding methodology. For my part, the next standards matter essentially the most:
Requirements compliance#section3
Net requirements supply a common language to a complete ecosystem of browser makers, software builders, and internet authors, so that each one of those audiences can keep away from compatibility issues, vendor lock-ins, and patent-infringement points. Additionally they allow you, the developer, to create legitimate HTML, which is usually a challenge requirement.
Cross-browser assist#section4
Assist for all main browsers and standard working techniques is a vital requirement. To assist my analysis, I’ve created a Flash embed take a look at suite to evaluate browser assist for numerous markup-based embedding strategies. The take a look at suite contains info on parameters together with assist for various Flash publish settings, streaming, and scriptability.
Assist for different content material#section5
In all instances the place you wish to create search-engine–pleasant content material or content material that’s accessible to individuals who browse the online with out plugins, different content material is your finest good friend.
Avoidance of Flash content material/participant mismatches#section6
Sadly for all of us, the Flash participant will try and play Flash content material it doesn’t matter what Flash plugin model that content material was revealed for. This works positive so long as an outdated plugin doesn’t encounter performance that’s solely obtainable in larger plugin variations. If it does, your customers will see damaged content material or no content material in any respect. We wish to keep away from that.
Auto-activation of energetic content material#section7
As the results of the Eolas patent infringement, Microsoft up to date its internet shopping software program so guests can not immediately work together with Microsoft ActiveX controls loaded by object and embed parts, additionally referred to as “energetic content material.”
Briefly, Microsoft browsers won’t enable any consumer interplay with energetic content material till the consumer clicks to activate the management. To keep away from litigation, Opera additionally launched an analogous click-to-activate mechanism. These mechanisms work like pace bumps within the highway: you must break, slowly drive over it, and push the gasoline pedal once more. It could actually confuse the informal internet surfer and annoy the extra skilled consumer.
Ease of implementation#section8
Simplicity counts. Why leap by way of hoops if issues may be executed extra simply?
Flash embed fundamentals: embed and object#section9
There are two HTML parts that allow you to insert Flash content material into an internet web page. On one hand, you have got the proprietary <!– 403 MAR2013 –>embed ingredient<!– –>, which is supported by all main browsers (Line wraps marked » —Ed.):
<embed sort="utility/x-shockwave-flash" » src="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120" » pluginspage="http://www.adobe.com/go/getflashplayer" /> <noembed>Various content material</noembed>
Then again, you have got the object ingredient, which is a W3C suggestion. As a result of the W3C specs go away fairly a little bit of room on how one can implement plugin content material, two totally different object implementations have emerged over time.
Most trendy browsers have applied a standards-compliant different to the embed tag through the use of the thing’s MIME-type to find the suitable plugin (Line wraps marked » —Ed.):
<object sort="utility/x-shockwave-flash" » information="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120"> <p>Various content material</p> </object>
This methodology isn’t browser-specific and is subsequently the popular implementation.
The second implementation comes from Web Explorer on Home windows, which requires that you simply outline the thing’s classid attribute so a browser can load the correct Flash participant ActiveX management, which is a sound however browser-specific implementation (Line wraps marked » —Ed.):
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8- » 444553540000" width="300" peak="120"> <param identify="film" worth="https://alistapart.com/article/flashembedcagematch/myContent.swf" /> <p>Various content material</p> </object>
Observe: Within the final two code examples I’ve intentionally omitted the codebase parameter, which is usually used to level to the URL of the Flash plugin installer on Adobe’s servers, so a browser can robotically obtain it if it’s not already put in. Nevertheless that is unlawful in keeping with the specs—which limit its entry to the area of the present doc solely—and subsequently not supported by all trendy browsers.
Why embed continues to be round#section10
From an internet requirements point-of-view it could be straightforward to only reduce the embed ingredient out of the equation. It merely has by no means been a W3C suggestion and it by no means will likely be, due to patent points. Nevertheless in actuality it does have higher cross-browser assist than every single implementation of the object ingredient alone. Consequently it has even develop into the markup of selection on standard web sites like Google Video and Brightcove.
Though internet requirements are created to keep away from compatibility points, the embed ingredient is extra unambiguous than the W3C-approved object ingredient. embed’s strict implementation guidelines and good assist have turned it right into a de facto customary that can hang-out us till we’ve had common assist for the object ingredient lengthy sufficient to start ignoring the browser variations that don’t prefer it.
So what are these browser-support issues?
The place internet requirements assist is damaged#section11
The twin implementation of the object ingredient technically doesn’t break internet requirements, however it’s the root of many issues. As a consequence, we have to discover a method to mix the 2 object implementations right into a single approach. To make issues worse, we additionally need to cope with browsers which have (or used to have) a damaged object implementation. Let’s check out the issues:
- The generic object implementation breaks in Web Explorer on Home windows. IE masses the plugin and the SWF file, however doesn’t show the Flash content material.
- After we partially mix the 2 implementations by including the
filmparameter to the generic implementation, Web Explorer is ready to show the Flash content material, however to not stream it. - If we utterly merge the 2 implementations, the whole lot works positive in Web Explorer, however Gecko-based browsers ignore the Flash content material and present different content material as an alternative.
One of many options of the object ingredient is you could nest totally different implementations inside one another (Line wraps marked » —Ed.):
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8- » 444553540000" width="300" peak="120"> <param identify="film" worth="https://alistapart.com/article/flashembedcagematch/myContent.swf" /> <object sort="utility/x-shockwave-flash" » information="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120"> <p>Various content material</p> </object> </object>
Sadly, a bug in older variations of Web Explorer treats nested object parts as if they’re in collection, making an attempt to render each of them.
To make issues worse, variations of Safari as much as and together with model 1.2.2 on Mac OS 10.3 ignore the object ingredient’s nested param parts, although they assist the identical attributes for the embed ingredient.
Observe: You might also be asking your self how a lot sense it makes to outline the identical content material, attributes, and parameters twice, as within the above approach. This mixed methodology additionally makes it more durable to, for instance, use JavaScript to speak together with your Flash content material, as you would need to take a look at which object you talk with.
We’re slowly shifting in direction of a greater world: a few of these bugs are already fastened, however Web Explorer’s non-generic and buggy object implementation continues to be stifling the adoption of the object ingredient. We will solely hope that this will likely be fastened within the close to future.
Why object is healthier than embed#section12
Regardless of its present lack of cross-browser assist the object ingredient nonetheless has extra to supply than the embed ingredient, as a result of along with being standards-compliant, it additionally provides superior assist for different content material.
The object ingredient means that you can nest different content material inside it, and this content material is displayed if an implementation isn’t supported or a plugin isn’t put in. This content material may even be picked up by search engines like google, making it an incredible software for creating search-engine–pleasant content material.
The embed ingredient helps different content material by providing the noembed ingredient, however this solely works for these few browsers that don’t assist the embed ingredient itself, like Web Explorer on Home windows Cell platforms. In contrast to the object ingredient, embed doesn’t assist different content material when the embed ingredient is supported, however the Flash plugin isn’t put in. In that state of affairs, it depends on the pluginurl and pluginspage attributes to show a picture damaged puzzle piece that may be clicked on to put in the plugin. Very Nineteen Nineties.
I consider it’s a significantly better resolution to show different content material that describes the plugin content material and features a delicate indication {that a} consumer can have a richer expertise by downloading the Flash plugin. (That is but one more reason we don’t actually need the often-misused codebase attribute.)
To summarize, the object ingredient provides vital benefits over the embed ingredient for those who favor to create standards-compliant code or accessible, search-engine–pleasant content material.
The restrictions of markup-only strategies#section13
Contemplating the standards we outlined earlier—requirements compliance, cross-browser assist, assist for different content material, avoidance of participant/content material mismatches, auto-activation of energetic content material, and ease of implementation—it’s straightforward to see that there’s actually solely a lot that markup can do by itself.
Though markup provides the means to show Flash content material or different content material, it will be unable to supply us with an answer to keep away from Flash content material and plugin mismatches or a workaround to keep away from having to click on to activate energetic content material, and it’s not all the time the only factor to implement, both.
Nonetheless, let’s take a fast take a look at the preferred markup “mixture” strategies.
The twice-cooked methodology#section14
Within the Flash IDE, you possibly can publish HTML pages that embrace the so-called twice-cooked methodology, combining Microsoft’s particular object implementation with the proprietary embed ingredient nested inside it as different content material (Line wraps marked » —Ed.):
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8- » 444553540000" codebase="http://fpdownload.macromedia.com » /pub/shockwave/cabs/flash/swflash.cab#model=8,0,0,0" » width="300" peak="120"> <param identify="film" worth="https://alistapart.com/article/flashembedcagematch/myContent.swf" /> <embed sort="utility/x-shockwave-flash" » src="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120" » pluginspage="http://www.macromedia.com/go » /getflashplayer" /> </object>
As you possibly can see, this methodology is solely primarily based on proprietary and vendor-specific markup. It clearly focuses on cross-browser assist solely, and isn’t requirements compliant.
The twice-cooked methodology is redundant, makes your internet pages invalid, and doesn’t embrace a mechanism for inserting different content material. And the one purpose it’s straightforward to make use of is as a result of the Flash IDE generates it: don’t ask anybody to breed it from reminiscence.
The nested-objects methodology#section15
Nesting the 2 object implementations is an effective different to the twice-cooked methodology, as a result of it add requirements compliance and helps different content material. Let’s have a look (Line wraps marked » —Ed.):
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8- » 444553540000" width="300" peak="120"> <param identify="film" worth="https://alistapart.com/article/flashembedcagematch/myContent.swf" /> <object sort="utility/x-shockwave-flash" » information="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120"> <p>Various content material</p> </object> </object>
Sadly it nonetheless lacks cross-browser assist as a result of Web Explorer’s nested object ingredient bug and Safari’s lack of assist for nested param parts. A standard workaround makes use of proprietary Web Explorer conditional feedback to keep away from this browser’s pitfalls (Line wraps marked » —Ed.):
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-» 444553540000" width="300" peak="120"> <param identify="film" worth="https://alistapart.com/article/flashembedcagematch/myContent.swf" /> <!--[if !IE]>--> <object sort="utility/x-shockwave-flash" » information="https://alistapart.com/article/flashembedcagematch/myContent.swf" width="300" peak="120"> <!--<![endif]--> <p>Various content material</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
Apart from the beforehand talked about redundancy, this methodology is much more complicated to creator and it makes use of an unpleasant workaround which will complicate the method of producing code utilizing server-side languages.
An alternative choice is the Flash Satay methodology, which relies on the generic object implementation and contains a further film parameter to keep away from the bug that causes Flash content material to not show in Web Explorer. It additionally features a container Flash film to repair the Web Explorer streaming bug (Line wraps marked » —Ed.):
<object sort="utility/x-shockwave-flash" » information="c.swf? path=myContent.swf" width="300" peak="120"> <param identify="film" worth="c.swf?path= » myContent.swf" /> <p>Various content material</p> </object>
Though it approaches the “very best” generic object implementation, Flash Satay comprises a workaround whose architectural implications gained’t go well with all people—and it additionally doesn’t assist nested param parts in older variations of Safari.
The case for DOM scripting#section17
When you think about the constraints of markup-only strategies, you would possibly marvel why we shouldn’t simply use a DOM script as an alternative. With scripting, we might dynamically serve the markup every browser requires:
- The browser-specific object implementation for Web Explorer.
- The proprietary
embedingredient for older variations of Safari. - The generic object implementation for all different browsers.
A DOM script can be versatile sufficient to unravel our different issues: for starters, we are able to use it to unravel the Flash participant and content material/participant mismatch downside by detecting the plugin model and testing per Flash film whether or not Flash content material or different content material must be proven. When the required plugin model isn’t obtainable we might set off <!– 404 MAR2013 –>Adobe categorical set up<!– –>, a mechanism constructed into the Flash participant that simplifies the plugin-download course of.
A DOM resolution additionally permits us to keep away from click-to-activate mechanisms by dynamically writing the object parts.
Issues to remember when utilizing JavaScript#section18
As a result of not all people is an skilled JavaScripter—and since even those that are shouldn’t need to reinvent the wheel—it is sensible to make use of an present Flash-embedding JavaScript library. Let’s think about the standards for choosing a reliable library.
Requirements compliant markup isn’t promoted by library-makers, as a result of these libraries both outline your Flash content material in JavaScript itself or in a growth software that does the give you the results you want. Most libraries generate invalid HTML and, as a result of the markup is written dynamically, the W3C validator is unable to examine your markup.
One other level to think about is how effectively a technique degrades when JavaScript is disabled, unsupported, or not supported effectively sufficient. What could be the purpose in utilizing JavaScript to enhance the consumer expertise for one group of holiday makers, when by doing so that you break it for one more?
With all of this in thoughts, let’s check out among the hottest libraries to see how effectively they behave.
The Adobe Flash participant detection equipment#section19
Apart from the generated markup within the Flash IDE Adobe additionally offers the Flash participant detection equipment. There are 3 ways of utilizing this equipment:
- Checking the Detect Flash Model checkbox (beneath File > Publish Settings > HTML) within the Flash 8 IDE.
- Inserting it manually after downloading the detection-kit ZIP file.
- Publishing from Flex Builder 2, the place it’s included by default.
Though the detection equipment comprises all of the options we would like, like model detection, categorical set up, and auto-activation of energetic content material, it has room for enchancment. Relating to requirements compliance it hopelessly fails: it’s nonetheless primarily based on the twice-cooked markup, so it both generates Microsoft’s vendor-specific object implementation or the proprietary and noncompliant embed ingredient.
It additionally helps different content material though in an odd and inconsistent method. It’s essential to outline your different content material twice: in each inline JavaScript and in a noscript ingredient. And whereas the Flash IDE and the downloadable detection equipment go away it as much as you when it comes to what to outline as different content material, Flex 2 by default inserts the entire twice-cooked code blurb within the noscript ingredient with a purpose to show Flash content material in internet browsers that both don’t assist JavaScript or have JavaScript disabled.
All in all, the detection equipment lacks a great technique and a set of documented finest practices on how one can both promote correct degradation or make Flash content material search-engine–pleasant and accessible. And it’s nonetheless not the best resolution to make use of if you want to customise it.
Well-liked open supply alternate options like my very own UFO and Geoff Stearns’s SWFObject are most likely essentially the most full and easiest-to-use libraries at the moment obtainable.
Though they appear comparable on the floor, the 2 libraries are fairly totally different beneath the hood. For instance, SWFObject makes use of Adobe’s twice-cooked methodology, whereas UFO generates largely standards-compliant markup. Then again they do share architectural rules: each libraries are constructed round the concept you creator marked-up different content material (thus creating accessible, search-engine–pleasant content material) that’s changed by a DOM script when the required Flash and JavaScript assist is accessible.
Regardless of their express assist for different content material, each libraries nonetheless have one basic weak point: they depend on JavaScript to insert Flash content material. Consequently a small group of holiday makers which have the Flash plugin put in however have JavaScript disabled or lack ample JavaScript assist will see solely different content material.
The case for unobtrusive DOM scripting#section21
To resolve the degradation situation, it will make extra sense to make use of a very unobtrusive embedding methodology: a hybrid resolution that makes use of requirements compliant markup like that used within the Flash Satay methodology to embed each Flash content material and different content material whereas using an unobtrusive DOM script that serves as an add-on to repair issues and add companies to trendy browsers.
ObjectSwap relies on these rules and is in my view an architectural position mannequin for future Flash embedding libraries. Sadly, ObjectSwap focuses totally on the auto-activation of energetic content material, so it isn’t as helpful for model detection and markup-support issues like the dearth of streaming assist in Web Explorer or parameter assist in older variations of Safari.
One other level it may be improved on—which is one thing to remember for all unobtrusive libraries—is efficiency. Through the use of the onload occasion, your DOM associated habits is just utilized after a complete web page, together with all of its property, is loaded. A greater different could be the DOMContentLoaded occasion, which helps you to apply your habits as quickly as a web page’s DOM is accessible. As a result of the DOMContentLoaded occasion isn’t totally supported throughout browsers but, you could possibly use this resolution as an alternative.
The way forward for Flash embed#section22
Though the proper resolution could not have been written but, I do assume we’re already fairly far into the precise course. If we mix the most effective options of various libraries, we should always be capable of fulfill all the standards we outlined originally of this text.
Seeking the answer, Geoff Stearns and I’ve teamed up. As a substitute of rewriting UFO and SWFObject, we’re engaged on a single new, requirements compliant and utterly unobtrusive resolution that can ultimately substitute each libraries. The fruit of this co-operation is the SWFRepair challenge, which is at the moment within the alpha part.
Step up, software program makers!#section23
Though internet builders can provide you with inventive workarounds, it’s the browser and plugin makers who’ve the power to make actual progress. By fixing excellent bugs and adopting embedding options that assist each internet requirements and promote the usage of different content material, they might give builders the means to do their each day jobs the precise manner. So how about it, software program builders?
