title: video fallback using object tag doesn't work with appendChild
body: <p>I've got a video player application that uses a variant of <a href="http://camendesign.com/code/video_for_everybody" rel="nofollow">video For everybody</a>. With a HTML5 <code>&lt;video&gt;</code> tag enclosing a <code>&lt;object&gt;</code> tag for flash falback on internet exploder. It all works well when I do this statically, however when the video elements are built using javascript, it seems that IE9 doesn't like this.</p>
  
  <p>If i use static code like this it works:</p>
  
  <pre><code>&lt;video id="video" width="360" height="240&gt;
  &lt;source type="video/ogg" src="content/mov1.ogv"&gt;&lt;/source&gt;
  &lt;source type="video/mp4" src="content/mov1.mp4"&gt;&lt;/source&gt;
  &lt;object data="player.swf" type="application/x-shockwave-flash" height="384" width="512"&gt;
  &lt;param name="movie" value="player.swf" &gt;
  &lt;param value="autostart=true&amp;amp;file=/mov1.mp4" name="flashvars"&gt;
  &lt;/object&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>but when I use a javascript function to build the video player as below, it doesn't.</p>
  
  <pre><code>function makeV4EPlayer(mp4URL, ogvURL, movieWidth, movieHeight, displayname){
      //create the video element and set its attributes
      var videoObject= document.createElement('video');
      videoObject.setAttribute("id", "video");        
      videoObject.setAttribute("width", movieWidth);
      videoObject.setAttribute("height", movieHeight);
  
      //add mp4 source
      var mp4Src=document.createElement('source');
      mp4Src.setAttribute("src", mp4URL);
      mp4Src.setAttribute("type","video/mp4");
      videoObject.appendChild(mp4Src);
  
      //add ogv source
      var oggSrc=document.createElement('source');
      oggSrc.setAttribute("src", ogvURL);
      oggSrc.setAttribute("type","video/ogg");
      videoObject.appendChild(oggSrc);
  
      //add object with flash player      
      var flashObject=document.createElement('object');
      flashObject.setAttribute("width", movieWidth);
      flashObject.setAttribute("height", movieHeight);
      flashObject.setAttribute("type", "application/x-shockwave-flash");
      flashObject.setAttribute("data","swf/player.swf");
      var params1 = document.createElement('param');
      params1.setAttribute("name", "movie");
      params1.setAttribute("value","swf/player.swf");
      var params2=document.createElement('param');
      params2.setAttribute("name","flashvars");
      params2.setAttribute("value",'autostart=true' + '&amp;file=/' + mp4URL);
      flashObject.appendChild(params1);
      flashObject.appendChild(params2);
      videoObject.appendChild(flashObject);
  
      return videoObject;
  }
  </code></pre>
  
  <p>The Javascript builds the <code>&lt;video&gt;</code> tag just fine, and populates it with all the stuff, it's just that IE won't play it. Of course it works happily on every other browser in the universe.</p>
  
  <p>When I use the IE9 developer tools to inspect the pages I note that in the static version it sees the video tag and the object tag as being siblings - that is the object isn't inside the video tag, but in the javascript version the object is nested inside the video tag. That I believe is the nub of the problem.</p>
  
  <p>I don't think it's relevant, but I'm using the JW Player as my fallback flash player.</p>