HTML 5 Flash embedding and other validation errors

When I completed the first round of my HTML 5 redesign, some validation errors remained.

Most were due to WAI-ARIA roles being applied to new HTML 5 structural elements, which isn’t currently allowed (both specs are in draft, remmeber). I’m not worried about those; accessibility trumps validity for me, and ARIA doesn’t validate in HTML 4, either.

I was also getting an odd error with Remy Sharp’s groovy HTML 5 enabling script, which I’d surrounded by a conditional comment as only Internet Explorer needs it. Part of the JavaScript has a double hyphen and HTML 5 doesn’t like “--” in comments, so fearphage sent me a rewrite that reversed the JavaScript. You don’t need to do this as you would have the script in an external file; I have it included in the head of each page so that visitors can see what’s happening.

However, none of the embedded Flash movies from YouTube would validate. I was using the default code given by YouTube which nests an embed tag inside an object tag and which doesn’t validate in current flavours of (X)HTML because embed was never in any spec.

Fearphage suggested using just the object tag for the Flash movies, but Patrick Lauke pointed out that there are some problems with that approach:

One of the HTML 5 design principles is to “pave the cowpaths”. Because everybody uses embed, it’s been added to the spec. So by rearranging some of YouTube’s suggested code (self-closing param elements, escaping ampersands in URLs and repeating the URL for a third time as a data attribute on the object element) I came up with an accessible-as-possible, cross-browser, valid HTML 5 way to embed Flash movies:

<object width="425" height="344" data="http://www.youtube.com/v/8-pFwbHMuwA&amp;hl=en&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/8-pFwbHMuwA&amp;hl=en&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/8-pFwbHMuwA&amp;hl=en&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" />
</object>

What we need now is for some kind soul to write a wizard that converts YouTube’s default code into code formatted as above.

It’s with some irony that I write this post, because one of the exciting things about HTML 5 is the video element that allows video to be added to a page with a simple <video src="blah.src" controls>I'm fallback content</video> and then plays it without any plugins or scripting. It allows an open, patent-free video codec to interact with canvas and SVG and it doesn’t require duplication of data twice or three times like the code contortions above.

Unfortunately it’s usefulness is mired in politics—see David Storey’s The future of video on the Web.

I’m too lazy to amend every instance from the last five years, but my home page is now valid apart from ARIA roles and an objection to the feed: protocol on a link to my RSS feed.

Thanks Patrick and fearphage.

28 Responses to “ HTML 5 Flash embedding and other validation errors ”

Comment by Remy Sharp

That IE conditional parsing error is superb! So it doesn’t like to encounter ‘–’ within the conditional. Brilliant! :-)

It’s worth noting that the JS snippet I wrote has an embedded IE sniff in the code, so it will only execute in IE. However, it’s a blanket IE sniff, so if IE8 implements HTML5 element support (or it might do already, I just missed it) the code will still run. But then, I guess IE will have a screaming fast JS engine – so it won’t matter anyway (…I wish/hope).

Comment by Bruce

Hi Philip, I didn’t give swfobject a go as I’m trying to make my site valid html5 that doesn’t rely on JavaScript.

What does it gain me that the approach I outline above doesn’t?

Comment by Bruce

Ah, I see. So SWFObject uses nested objects with some conditional comments, thereby getting round the fact that embed won’t validate in current flavours of (X)HTML.

I don’t need the conditional comments because embed works in HTML 5.

Comment by Bruce

Very nice Graham. Anyway it could escape the ampersands so it passes that validation, too?

Passing URL http://www.youtube.com/watch?v=BTk1JRbXdqU with 425 x 344 dimensions returns unecoded ampersands in the URLs.

(I looked at your source and it seemed to be trying to do that, so I’m stumped (being a PHP numpty).

What’s your license on that code?

Comment by Affan

Is there a way for the html5lib sanitization code to skip the object code for youtube so that we are able to sanitize the html input from the user but allow embedding of videos?

Comment by Graham Irwin

I thought I’d convert my website to HTML5 and use this method for embedding my Flash movies. All went well except it didn’t display the movies in any version of IE (using IETester)…

Comment by Florent V.

Hi Bruce. I was wondering if there was any benefit to using the OBJECT element at all, here. What happens if you only use EMBED? Do browsers understand that allright? Are JAWS and NVDA, using either IE or Firefox, happy?

The advantage of the OBJECT element over EMBED used to be:
- can be used for lots of formats (plugin data, HTML pages, images, multimedia files to be played by the browser);
- allows rich alternative content (much better than the limited alt attribute of IMG and AREA elements);
- valid HTML4/XHTML1.

In HTML5, EMBED validity is not an issue, and versatile nature of OBJECT was shot down by the blessing of IFRAME, and the addition of VIDEO and AUDIO elements. (I’m not lamenting that, mind you. OBJECT was a great idea, but the spec was probably too vague for it to gain traction. The HTML world has moved on and now we have a specific element for each media category, let’s roll with that.) So the only remaining virtue of OBJECT over EMBED is (rich) alternative content. Since we’re using EMBED as the only alternative content anyway, this advantage is lost too. So why use OBJECT at all if, by chance, browser and screen reader support lets us drop it?

Anybody knows what the support for EMBED is these days?

Comment by The Quest for an Accessible Flash MP3 Player | Terrill Thompson

[...] One lingering problem is that the <object> code recommended in the niftyPlayer documentation fails HTML5 validation. HTML5 actually supports both <object> and (for the first time ever in an HTML spec) <embed>. However, the classid and codebase attributes are obsolete, and probably a few other attributes as well. At this phase in my testing I wasn’t especially inclined to spend much time trying to figure out how to convert old <object> code to valid, functional HTML5, although it looks like Bruce Lawson has gotten a jump start on this in his article HTML 5 Flash embedded and other validation errors. [...]

Comment by CICDC

The embed tag doesn’t work in older versions of IE period, and html5 is also not supported by older browsers. Although I agree that we should all be using the latest and greatest, it’s not always the case. For example there are some embedded (not to be confused with our html tag) browsers that are stuck at version x and cannot be updated (lets assume that the flash works of course).
So to keep code clean and have it degrade nicely, you can display flash in a single object tag no matter what browser you use as follows (Note the type attribute, it’s what makes this not need the embed tag):

<object width=”425″ height=”344″ type=”application/x-shockwave-flash” data=”http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1″ id=”youtubevideo” >
<param name=”allowFullScreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1″ />
</object>

No more embed tag, only 2 urls (and only since IE doesn’t like having the “movie” param omitted) and xhtml and html5 compliant.
I hope this might be the piece of mind someone’s looking for.

Comment by Subhasish ESPPL

This is the perfect HTML5 flash embed code which will work in all browsers including IE but IE8 or higher.
Happy coding..
cheers

Comment by Archer

Thanks for this post. Been looking for the embed script for html5.

this script really helped

Comment by short term stress

I believe what you published made a lot of sense. But, think on this, what if you typed a
catchier title? I am not saying your information is not solid, however suppose you
added a title that makes people want more? I mean Bruce
Lawson’s personal site : HTML 5 Flash embedding and other validation errors
is a little boring. You might look at Yahoo’s front page and see how they create news titles to grab people to click. You might add a video or a related pic or two to get readers excited about everything’ve written.
In my opinion, it could bring your website a little livelier.

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . To display code, manually escape it.