You might also know these little ‘by the way’ feature requests from your boss, which cost you 2 days of work and look like 5 minutes of work. I spent the day with one of them.
I tried to develop a little web page with “Web 2.0 style” overview of some videos about our research. After finishing the dynamic list creation in PHP (30 minutes), I started to evaluate the different available JavaScript libraries. As one example, we found BoxOver, which produces really nice-looking tooltip windows, and Scriptaculous. After some playing, we had a basic set of effects on the page.
Next step was to implement that the click on a video preview image leads to the loading of an embedded video player, running the chosen video. YouTube and friends solve this by embedding a flash movie – nice as copy protection, and nice to control through images with JavaScript event handlers. However, we wanted to keep our original movie formats, and therefore looked for a solution to embed MPEG files directly with Windows Media Player or Apple QuickTime Player. Elizabeth Castro provides a great summary of all the things that can go wrong while embedding these players in your web page. The most relevant information was that video player embedding usually demands explicit width and height tags, even if they are marked as optional. After some testing, we got a static version working.
So far so good, but how to show the media player on click ? First option was to hide the media player element and re-show it in the click event handler. This does not work for IE7, since the click on the image brings up an “I disabled an ActiveX control for security reasons and now your page is messed up. Sorry.” warning without any option to continue anyway. I can understand the reasons not to embed hidden ActiveX controls without notice, but I would like to decide myself if this is a problem or not. The second problem was that some browsers started to load all (==10) movies at the same time, since the hidden player object element was already part of the page. Bad user experience with low bandwidth, as you might guess …
Our second idea then was to add the video player code dynamically in the onClick() routine, which is the usual “Web 2.0″ style of modifying the page content on client side. It worked *great’ on Firefox, but the JavaScript code crashed on IE7 all the time. With an useless error message, it took me hours on the web to find the original source of the problem. It seems like Microsoft is not able to fix an approved bug for the appendChild() method, which is known since IE5.5 (!):
[source:JavaScript]
function msvideo(file) {
new Effect.Appear(“enlarge_” + file,{ duration: 3.0 });
var tags = document.getElementsByTagName(‘img’);
for (var i = 0; i < tags.length; i++) {
if (tags[i].id == file) {
var newotag = document.createElement('object');
newotag.setAttribute('type','video/x-ms-wmv');
newotag.setAttribute('data','./data/movies/' + file);
newotag.setAttribute('width','‘);
newotag.setAttribute(‘height’,’‘);
newotag.setAttribute(‘id’,file);
newotag.setAttribute(’standBy’,'Loading player …’);
addParam(newotag,’src’,’./data/movies/’ + file);
addParam(newotag,’controller’,'true’);
addParam(newotag,’autostart’,'false’);
addParam(newotag,’qtsrcdontusebrowser’,'true’);
addParam(newotag,’enablejavascript’,'true’);
tags[i].parentNode.replaceChild(newotag, tags[i]);
}
}
}
function addParam(o, key, value) {
var newparam = document.createElement(‘param’);
newparam.setAttribute(key,value);
// breaks on IE5 to 7 due to MS Bug 927917
o.appendChild(newparam);
}
[/source]
As I understood, you cannot add new child nodes to an open parent container in IE, which is no problem in all the other browsers. If you remove all calls to addParam() in the example above, then everything is fine. The problem – WM10 is shown in IE7, but does not play anything, since the “activate ActiveX plug ins explicitly” feature stops your video from playing with the default settings.
In sum, I found hundreds of postings regarding similar problems with the DOM support in IE. We ended up with converting all videos to flash, and using an embedded player like YouTube:
