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:
- Internet Explorer can’t stream videos but must download the full movie before showing it
- screenreaders can’t access accessibility information within the Flash movie (admittedly not likely to be a problem with most YouTube uploads)
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&hl=en&fs=1">
<param name="movie" value="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/8-pFwbHMuwA&hl=en&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.
18 Responses to “ HTML 5 Flash embedding and other validation errors ”
You don’t mention the often popular Flash Satay method that some of the kids like to use. Notwithstanding JAWS not properly reading Satay’d objects, will the Satay validate if used?
Just curious: Did you give swfobject a go? I recently posed the question about HTML 5 on the swfobject google group (I even mentioned your site), and it would be great if you can share any experiences with swfobject and HTML 5.
http://groups.google.com/group/swfobject/browse_thread/thread/3ad1ece8aef0f9c9
Cheers
- philip
SWFObject has two approaches, one is JavaScript (‘dynamic publishing’), the other is plain markup (‘static publishing’, which uses a nested object).
Try it out: http://pipwerks.com/lab/swfobject/basics/2.0/index.html
Official documentation:
http://code.google.com/p/swfobject/wiki/documentation
How about Hixie’s nested object method?
I managed to use it for a YouTube video I posted once and it both plays and my page validates as XHTML 1 strict.
Ah, time to answer my own question, as you’ve said above. I forgot that the method used conditional comments.
Carry on, ignore me!
So, what’s the best method of embedding flash that will keep JAWS happy?
thanks,
Joe
[...] Fehler sind ausgemerzt. Hierzu möchte ich auf einen Link hinweisen, der kurz eklärt, wie man Einbettungen für HTML5 anpassen kann. Sollten dann noch Fehler im Validator erscheinen, sind es Schönheitsfehler – basta. [...]
Great post Bruce (yes, it was a while ago I know). Don’t know if the following helps:
http://www.irwinassociates.eu/movie-code.zip
and a usable version at
http://www.irwinassociates.eu/movie-code.php
Could do with some tarting up…
Thanks Bruce. The revised code should do the trick, I think. The textarea could probably do with expanding too.
Code is simply free.
Is JAWS happy with just an embed without a wrapping object?
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?
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).