Valid Flash, video, and audio embed (object) markup

By Ben Henick | August 15th, 2006 | Filed in Design, HTML/XHTML, Validation

The following three links need to be in one place, once and for all:

Valid Flash <object> markup: “Flash Satay” by Drew McLellan
Valid video <object> markup: “Bye Bye Embed” by Elizabeth Castro
Valid audio <object> markup (with Quicktime): “Object Embedding” by Simon Jessey, et. al.

Here’s the backstory:

Eighteen months ago, I was approached by a longtime friend who works in wedding photography and wanted a proof of concept for serving video (so that he could develop and sell that service, of course). In his previous life this client was a project manager for a Very Large Consultancy and swore by Microsoft platforms, which meant IE-only development over my objections.

This same IE-only development continues as needed, to this day — the video side of my client’s operations has become immensely successful.

Imperative platform limitations notwithstanding, I discovered that producing valid and effective plugin markup is a nightmare. I’ve spent untold hours trying first to learn how on my own, then giving up in frustration and instead searching for tested examples. The list above is my latest leap toward a complete list of such examples.

Update:

Joe Clark points out that he’s been on top of this issue for a couple of years now.

As for SWFObject, it serves a purpose that I might have someday in the face of a tight deadline, relaxed project requirements, or a requirement for the most recent version of Flash. However, I’ve been through every line of SWFObject’s code and can state with confidence that while it obeys the letter of the W3C Recommendations, it totally disregards their spirit.

Your Replies

#1 On August 15th, 2006 1:18 pm tiffany replied:

One thing to note: IE has revamped the way it handles Flash and Quicktime plugins. You first have to click to activate the plugin before interacting with it unless you write the object and parameters to the browser using Javascript.

Of course that method has its own issue: it fails if JS is disabled.

#2 On August 15th, 2006 2:07 pm dgx replied:

Another method how to correctly insert a Flash into XHTML. It’s valid, functional in all browsers (that I know), always show alternative content if the plugin is missing, can be combined with Eolas workaround trick and it doesn’t require javascript.

#3 On August 15th, 2006 2:27 pm Olly Hodgson replied:

My favoured method of embedding Flash files into a page is SWFObject: http://blog.deconcept.com/swfobject/

#4 On August 15th, 2006 2:35 pm WaSP Member bhenick replied:

There’s a definite trend going here… hmm, JavaScript.

I can agree that JavaScript based solutions work most of the time for most of the people, but… alert suppression? Meh. Flash version detection? Meh. Gaining these features at the expense of locking out users in high-security environments feels to me like one hell of a devil’s bargain.

P.S. If you look under the hood of SWFObject, you’ll discover that it’s about as unobtrusive as the archetypical mother in law.

#5 On August 15th, 2006 3:34 pm Joe Clark replied:

I’ve had a much longer list, updated in July 2006, online since 2004. I’ll add the Jessey link.

#6 On August 15th, 2006 3:50 pm bobby van der sluis replied:

UFO is completely unobtrusive and as standards compliant as a JavaScript solution can be: http://www.bobbyvandersluis.com/ufo/

Please note that a solution like Flash Satay is not a full-proof solution either. It suffers from the following:
1 – Streaming issues in IE, as discussed in the original ALA article
2 – A nasty object bug terrorizing multiple browsers, as documented in ‘designing with web standards, 2nd ed’
3 – Lack of object attribute support in older versions of Safari and Opera
4 – Lack of cross-browser support for alternative content within the object element
5 – JAWS issues with support for Flash accessibility features: http://weblogs.macromedia.com/accessibility/archives/2005/08/in_search_of_a.cfm
6 – An unfortunate feature of the Flash player that will attempt to play content published for a higher version, possibly resulting in broken or no content: you do need Flash version detection
7 – The need to activate content in IE6 SP2+ as the result of the eolas patent dispute

Until object gets implemented properly a JavaScript solution like UFO or SWFObject is the way to go (and even then you even don’t solve the last 3 issues). Jeffrey Zeldman recommends UFO in ‘designing with web standards, 2nd ed’, for practically the same reasons as listed above.

#7 On August 15th, 2006 3:59 pm Ruben Rojas replied:

Hi, you know the flash enbed method whit SWFObject();

is here: http://blog.deconcept.com/swfobject/

is an external method for standart compliant flash embed

#8 On August 15th, 2006 4:04 pm bobby van der sluis replied:

UFO is completely unobtrusive and as standards compliant as a JavaScript solution can be.

Please note that a solution like Flash Satay is not a full-proof solution either. It suffers from the following:
1. Streaming issues in IE, as discussed in the original ALA article
2. A nasty object bug terrorizing multiple browsers, as documented in ‘designing with web standards, 2nd ed’
3. Lack of object attribute support in older versions of Safari and Opera
4. Lack of cross-browser support for alternative content within the object element
5. JAWS issues with support for Flash accessibility features
6. An unfortunate feature of the Flash player that will attempt to play content published for a higher version, possibly resulting in broken or no content: you do need Flash version detection
7. The need to activate content in IE6 SP2+ as the result of the eolas patent dispute

#9 On August 15th, 2006 8:40 pm Jack Saat replied:

Unobtrusive Flash Objects (UFO) v3.20 is the best way to go!

#10 On August 15th, 2006 8:40 pm Jack Saat replied:

http://www.bobbyvandersluis.com/ufo/

#11 On August 15th, 2006 8:46 pm Jack Saat replied:

UFO is as standards compliant as it can be; it uses the valid object element over the proprietary and invalid embed element, it prefers W3C DOM methods over proprietary methods like innerHTML, but both as long as a fully functioning feature set allows it to:

* UFO uses W3C DOM methods to insert the object element for all Gecko based browsers (e.g. Firefox, Mozilla, Netscape) and all other browsers that use both the Netscape plug-in API (e.g. Opera and Safari) and an XML MIME type.
* UFO uses innerHTML to insert the object element for Internet Explorer.

#12 On August 16th, 2006 3:17 am pilmore, lee » Valid Flash, video, and audio embed (object) markup replied:

[...] Courtesy of the Web Standards Project, one tidy resource on embedding objects the nice way, by Ben Henick. [...]

#13 On August 16th, 2006 11:42 am scott replied:

one of my favorite things about WaSP is the consistency of the recommendations made.

#14 On August 16th, 2006 12:24 pm Geoff Stearns replied:

I’ve written a response to this:

http://blog.deconcept.com/2006/08/16/embedding-flash-content-using-web-standards-yes-again/

#15 On August 16th, 2006 12:35 pm Geoff Stearns replied:

I’d also like to reply to this bit separately:

“As for SWFObject, it serves a purpose that I might have someday in the face of a tight deadline, relaxed project requirements, or a requirement for the most recent version of Flash. However, I’ve been through every line of SWFObject’s code and can state with confidence that while it obeys the letter of the W3C Recommendations, it totally disregards their spirit.”

While I see why you would think such a thing at first, once you actually consider what Flash content really is, and the technical limitations associated with using it (covered in the link above), you will probably change your mind.

First: What is Flash content? Is it presentation? Content? Behavior? The answer is it can be all 3 at once, or any combination. So how do you stay withing the spirit of Web Standards while using Flash? The best answer I could come up with is that you place it inline in your documents (not unobtrusively, because people want Flash content in their blog posts, which means you don’t want to insert it in the head of the document for each page).

You don’t want to just throw it out there, because some people can’t see it (exactly the same as some Javascript effects) – so you use progressive enancement. While the object tag has this somewhat built in, you have to take into consideration different plugin versions. This can only be done with Javascript, or with an extra Flash movie. The extra Flash movie method is flawed in many ways which I won’t go into here, but is covered on the SWFObject page.

So once you look at these issues, you should realize that without Javascript, your users will probably have many more issues than without.

Is the spirit of web standards to give users the best possible experience, or is it to stick to the rules no matter what?

#16 On August 16th, 2006 8:14 pm The Web Standards Project is wrong on SWFObject at Aral Balkan replied:

[...] The web standards project has a terribly elitist post by Ben Henick that is an unfair and uninformed dismissal of SWFObject. In the post Ben states: As for SWFObject, it serves a purpose that I might have someday in the face of a tight deadline, relaxed project requirements, or a requirement for the most recent version of Flash. However, I’ve been through every line of SWFObject’s code and can state with confidence that while it obeys the letter of the W3C Recommendations, it totally disregards their spirit. [...]

#17 On August 17th, 2006 2:47 am Flash, JavaScript, and web standards: like sodium and water? - The Web Standards Project replied:

[...] In my previous post I related my experience with implementing markup-only solutions to the task of incorporating multimedia into web sites, and later asserted a low opinion of a popular tool used for publishing SWF files. [...]

#18 On August 17th, 2006 1:05 pm Webpage blocked bcause of FLASH header replied:

[...] There are several alternatives to using <embed>, which causes problems in IE (they lost the EOLAS patent lawsuit). Here’s a good article on the subject: Valid Flash, video, and audio embed (object) markup – The Web Standards Project I use the SWFObject, but UFO looks pretty good too. __________________ Web Mistress & Web Standards Evangelist :) Tables Be Gone !! [...]

#19 On August 18th, 2006 6:33 pm Flash, JavaScript, UX, standards, apologia, apologies, and one man’s opinions - The Web Standards Project replied:

[...] My last two posts here have engendered a lot of anger from some Flash developers, and even led to direct questioning of my professional skill. Put bluntly, I believe the attacks say at least as much about the professionalism of their authors as they do about my own. [...]

#20 On August 19th, 2006 3:46 pm Flash, JavaScript, UX, standards, apologia, apologies, and one man’s opinions » The Worlds News » Blog Archive replied:

#21 On August 20th, 2006 9:03 am Just Another Rant » Blog Archive » Standards at any cost? replied:

[...] The guy who stirred this whole thing up (this time) commented on Geoff’s blog “The logical reply to your opening question is that users should be allowed to suffer because in most cases, they paid for their browsing software (albeit as one component of their stock OS install).” [...]

#22 On August 25th, 2006 9:02 am New Communications Site replied:

[...] The problem with the movie not playing right away is because of the <embed> tag and IE. MS lost the EOLAS lawsuit, so all active content is a problem if using <embed>. Use a different method: Valid Flash, video, and audio embed (object) markup – The Web Standards Project I like the design, it’s clean and the navigation is clear. Under the hood.. Your pages have way too many errors, lacking DOCTYPES, and its a morass of nested tables… bleaahh. Too many inline styles, use your CSS file. 100MB of storage doesn’t seem too fantastic when people can get 2 GIG from Gmail. __________________ Web Mistress & Web Standards Evangelist :) Tables Be Gone !! [...]

#23 On August 31st, 2006 8:47 am How to make an SWF embed and validate XHTML Strict replied:

[...] There are a number of methods listed in this article: Valid Flash, video, and audio embed (object) markup – The Web Standards Project __________________ Web Mistress & Web Standards Evangelist :) Tables Be Gone !! [...]

#24 On September 6th, 2006 1:52 pm WebGyver » Blog Archive » Flash and XHTML Web Design/Development replied:

[...] Valid Flash, video, and audio embed (object) markup Ben Henick published this collection of Flash-related articles and information on the The Web Standards Project web site. [...]

#25 On September 8th, 2006 1:12 pm Flash site wont load in IE replied:

[...] You used <embed> to put the Flash on the page, right ?? Well, that won’t work anymore, as you’ve found out. You are going to have to use a different method of putting flash (or any other active content) into a web page. MS lost the EOLAS patent lawsuit, which is why people with PATCHED versions of IE and Windows have to click twice to see active content. There are several methods of including Flash: Valid Flash, video, and audio embed (object) markup – The Web Standards Project __________________ Web Mistress & Web Standards Evangelist :) Tables Be Gone !! [...]

#26 On November 16th, 2006 11:18 pm links for 2006-11-17 « Donghai Ma replied:

[...] Valid Flash, video, and audio embed (object) markup – The Web Standards Project (tags: blog css design javascript media programming tutorial video web) [...]

#27 On February 23rd, 2007 8:55 am Mark’s (we)Blog » Embedding video content in (X)HTML replied:

[...] Firstly, the valid Flash, video, and audio embed (object) markup post at the Web Standards Project links to some great articles which should be read, namely: [...]

#28 On March 18th, 2007 8:45 pm How to Add Flash, Video, and Audio to Web Pages - Discussweb IT Community - Web Development, Software Programming, SEO, Quality Assurance, 3D, Web Hosting and more... replied:

[...] How to Add Flash, Video, and Audio to Web Pages – Today, 06:45 PM The issue comes up often to most webmasters about how to properly add video and audio to web pages. The following links provide most descriptive definition.. Valid Flash, video, and audio embed (object) markup – The Web Standards Project Valid Flash Valid Video Valid Audio The pages above should provide enough information to for you to add media to your web pages, but if for any reason there are more questions, let’s try to keep them here in this thread so we can have everything in one place and provide what will hopefully be a valuable resource. [...]

Return to top

Post a Reply

Comments are closed.

Working together for standards The Web Standards Project