JavaScript: how to dynamically add a Flash file (SWF) to the DOM so IE will load it

Question

I have pages that need to dynamically load content based upon their data description in XML files. Among the items that may be dynamically loaded are SWFs. I have code that correctly loads and starts the movies in Firefox via the http and file protocols and Chrome via the http protocol. I need it to successfully load in Internet Explorer in both http and file protocols as well, but all Flash Video Player reports is 'Movie not loaded...'. Could someone please review the following information and give me a fix?

The description of Flash objects in the XML looks like this:

<multimedia
    type='flash'
    swf='swf/filename_here.swf'
    width='600'
    height='400'
    version='7.0.19.0'
/>

I have JavaScript that parses this and creates an object that looks like the following JSON:

{
    'tag': 'multimedia',
    'attributes': [
        'type': 'flash',
        'swf': 'swf/filename_here.swf',
        'width': '600',
        'height': '400',
        'version': '7.0.19.0'
    ]
}

Eventually, this object is passed to a function that creates the DOM element (yes, I know the function is ordered oddly; I was trying different things to make it work):

var path = var path = document.location.href;
path = path.substr(0, path.lastIndexOf('/') + 1);

var version = null;

function isIE() {
    return navigator.userAgent.lastIndexOf('Trident') > 0;
}

function buildFlash(element) {
    version = element.attributes.version;

    var name = document.createElement('param');
    name.setAttribute('name', 'movie');
    name.setAttribute('value', path + element.attributes.swf);

    (if (!isIE()) {
        var inner = document.createElement('object');
        inner.setAttribute('type', 'application/x-shockwave-flash');
        inner.setAttribute('data', path + element.attributes.swf);
        inner.setAttribute('width', element.attributes.width);
        inner.setAttribute('height', element.attributes.height);
    }

    var flash = document.createElement('object');
    flash.setAttribute('id', 'flashMovie');
    flash.setAttribute('classid', 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000');
    flash.setAttribute('width', element.attributes.width);
    flash.setAttribute('height', element.attributes.height);
    flash.appendChild(name);
    if (!isIE()) {
        flash.appendChild('inner');
    }

    var div = document.createElement('div');
    div.setAttribute('id', 'multimedia');
    div.appendChild('flash');
    return div;
 }

The resulting div is eventually added to the correct location in the page.

Any ideas?

Answer 1

IE does not support dynamically adjusting most of the attributes/parameters of the object element.

You can use this function to create a cross-browser object element with the given attributes and parameters.

var createSwfObject = function(src, attributes, parameters) {
  var i, html, div, obj, attr = attributes || {}, param = parameters || {};
  attr.type = 'application/x-shockwave-flash';
  if (window.ActiveXObject) {
    attr.classid = 'clsid:d27cdb6e-ae6d-11cf-96b8-444553540000';
    param.movie = src;
  }
  else {
    attr.data = src;
  }
  html = '<object';
  for (i in attr) {
    html += ' ' + i + '="' + attr[i] + '"';
  }
  html += '>';
  for (i in param) {
    html += '<param name="' + i + '" value="' + param[i] + '" />';
  }
  html += '</object>';
  div = document.createElement('div');
  div.innerHTML = html;
  obj = div.firstChild;
  div.removeChild(obj);
  return obj;
};

Example

var swfEl = createSwfObject('http://example.com/example.swf', {id: 'myid', 'class': 'myclass', width: 100, height: 100}, {wmode: 'transparent'});
document.body.appendChild(swfEl);