Wednesday, February 10, 2010

Silverlight, jQuery and IE8

When I'm writing the ability for end users to include video in their content via TinyMCE, I like to try and keep it as simple as possible.

Usually, the user has their video file and a preview image to display via the player.

What I usually do is allow a <a> or <img> tag to be the place holder for the video file, and then I use jQuery to find <a> or <img> tags with the particular extension in mind, and replace that with a <div> tag to used as a placeholder for the player.

Up until now, the video files have typically been .flv, and I've been using the JW Player to play the .flv file within a Flash player.

But my latest project has the user wanting to play .wmv files, because they're not terribly tech savvy and are putting the movie together with MS Movie Maker. So I started down the road of doing a similar solution for .flv files, but using the Silverlight JW Player option. The Longtail products have been pretty solid and a single license will allow you to use the Flash and Silverlight players on your public website.

So off I went, did the coding, did the usual testing in Firefox. This time I used the <img> tag, rather than the <a> tag, and allowed the height and width attributes from the <img> tag to be passed to the Silverlight player.

I then thought I'd better take a look in IE, just to make sure. Typically, I run IE8, but always have it in compatibility mode, and always force the websites that I build to indicate that it should use compatibility mode. This is mostly because I refuse to deal with another browser option while IE6 and IE7 are still being used as much as they are.

Well, it didn't work. In fact, I was getting an "Unknown runtime error" from the silverlight.js provided by Longtail. I updated the silverlight.js to the latest one provided on the MSDN website. Still no joy.

After a bit of a search around, I came across this article. So it seems IE8 will crack the shits if you try to place a block object into an inline object via innerHTML. And specifically, it applies to the definition of the object when it was loaded, not what it looks like at runtime (so using CSS to force the display property to something else doesn't work).

In my case, <img> tag, an inline object, will be replaced with a <div> tag, and then Silverlight will replace the contents of the dynamically generated <div> tag with the ≶object> tag needed to display the player. It looks like IE8 is having issues with the dynamically created <div> tag, because it wasn't there at load time, and is unable to correctly identify it as being a block object. However, even this doesn't fit, because the <object> tag is an inline object, and you're allowed to insert those into a block object.

In the end, I've had to give instructions to the users to change the <img> tag to a <div> tag (and provide a proper closing </div> tag) and allow TinyMCE to save these tags with src, height and width attributes. IE8 doesn't seem to have a problem if the <div> tag is there from the get go.

I'll probably do a bit more digging around, since it will mean interesting things for jQuery libs that insert inline objects into dynamically generated block objects via the innerHTML property in IE8. Maybe jQuery does a different DOM manipulation for IE.

No comments:

Post a Comment