...or; Integrating and activating video

Object could not be displayed
An error occured trying to display an embeded Flash object, sorry for any inconveniance this may cause. To display this object you need a relatively new browser and Adobe's Flash player (installed and enabled).

The last few days I've spent a lot of time adding support for (external) video hosting services into SparkCMS. Although this should have been a straight-forward task, when combining browser-glitches, standards ignoring Flash inclusion and the USPTO this becomes rather troublesome. Though, I'm nearly there...

I had some specific targets for this; the generated output had to pass xhtml 1.1 strict validation, avoid JavaScript generation of objects, work in the major browsers1 and if possible bypass the Eolas wreckage.

Valid objects

Like others before me, I'm standing on the shoulders of giants. Getting this to work with xhtml 1.1 strict in the various browsers was, although I spent a few hours on it, mostly smooth sailing. I ran into some issues getting the Revver player to work when pages was served as "application/xhtml+xml" (virtual paths in the flashvars broke the player), though with help from the folks over at Revver (thanks Asi!) this issue was resolved.

Embedded video could not be displayed
An embeded Flash/video object could not be displayed. Sorry for any inconveniance this may cause! To display this object you need a relatively new browser and Adobe's Flash player (installed and enabled). Other things outside of our control (such as Revver being unavailible) may have caused this failure as well, if the problem doesn't resolve itself please contact the webmaster of this site. Alternatively you could try to open the object directly from Revver.

The resulting code is exemplified here with the latest episode of the show with zefrank. I've also created separate test/demo pages for Google video, Revver and YouTube (all four is created using the current version of the inline-plugin). If you're interested in getting your hands on the markup, I've made various examples (with easy to copy code) available at my newly created sandbox.

One thing broke though; the JS fix I was using to have <abbr> tags correctly displayed in IE6 rendered all objects useless. Not entirely sure, but i think it was the complete page-rewrite performed by the fix that actually caused the problems. Given that IE7 is available for download and soon will be forced down the pipes through WindowsUpdate, I'm writing this off as an acceptable loss for the time being.

Working around the Eolas wreckage

The Eolas patent only covers plugins when initiated from the page itself, as such objects created by an external file (such as through JS) isn't required to attach the "Click to activate" annoyance. This realization have lead to many workarounds being developed, either by completely creating the object with JS or by detecting and rewriting any objects with JS.

Creating the objects with JavaScript

This is basically the use of JS to replace a specified page element with the necessary markup for Flash to be embedded on a page, UFO and SWFObject are two well known, well documented and widely used examples of this technique. Both originally designed to serve valid code while enabling Flash in as many browsers as possible, has the added benefit of solving the issue with the "Click here to activate" annoyance since the objects are created from an external JS file.

The reasons for not wanting to use this technique are simple; I don't want to have the (unnecessary) dependency upon JS and I don't like that all objects need to be separately defined in a JS file. Basically I want the objects to "be" in the actual markup/content/context where it's going to be used. This would only solve the issues for Flash based content, any other plugin-content would still be require activation. I do however see several positive things with this technique, so I may consider implementing this (as an alternative method) at a later stage.

Rewriting objects with JavaScript

In theory this technique is as smart as it's simple; after a page is loaded into the browser a JS function looking for objects is triggered, if an object is identified it's copied then rewritten back into the document to replace the original object. As this technically calls the object from an external file, it's not affected by the Eolas patent.

Various developers have reported success with a wide variety of scripts based on this technique, of which I must have tested more than thirty variants the last couple of days. With Opera several scripts work exactly as they should, everything from the fishbowl2 on this page to more advanced objects such as the above mentioned video players are activated. In IE all produce an undesired version of, or fail completely with the Revver player (see the screenshot for the actual result). Although I haven't been able to pinpoint the problem, it seems to have something to do with the way IE handles the combination of xhtml and JS. So for now I'm forced to leave it as is for IE users.

For Opera users I've decided to adapt the brilliant "No Click-To-Activate" UserJS created by Mark Wilton-Jones. Basically I've just converted it into a standard JS function that take object types as an argument.

/*
eActivateObjects - Fix that darn Eolas wreckage
17.10.2006 @ 23:09 - Initial version, adapted from http://www.howtocreate.co.uk/operaStuff/userjs/noclicktoactivate.js
18.10.2006 @ 15:36 - Update: As this only applies to/works in Opera, we're checking for Opera...
*/
function eActivateObjects(strElements) {
// if (!document.getElementsByTagName || !document.body.cloneNode) { return false; };
if (!window.opera) { return false; };

var arrElements=strElements.split(","), objClone;
for(var iCnt1=0; iCnt1<arrElements.length; iCnt1++) {
  var arrObj = document.getElementsByTagName(arrElements[iCnt1]);
  for(var iCnt2=0; iCnt2<arrObj.length; iCnt2++) {
   objClone = arrObj[iCnt2].cloneNode(true);
   arrObj[iCnt2].parentNode.replaceChild(objClone,arrObj[iCnt2]);
   }
  }

}

After testing this solution for about a day and a half, I haven't noticed any issues. It works with different kinds of plugin content, it doesn't add a visible repaint, everything is displayed as it should and everything is activated. Now I only need to figure a way to make IE play along as well...

Footnotes
  1. For the time being I'm counting "the major browsers" as being Opera, Firefox, IE6 and IE7. Mostly because I haven't got an Apple or Linux system to test on. Hopefully though, creating valid code should produce something that works with Safari and Konqueror as well. (locate)
  2. I have no idea where that lovely little fishbowl came from or who has created it. When looking for something to test with, it was the only self-contained flash object I could find. (locate)

This blog post have been edited since it first was published.

  1. 21st of June 2007 @ 14:35, Swapped the video since the original (from zefrank) have been removed from Revver.

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.016 seconds...

Errors occurred while generating this page... (More info availible)