innerHTML flash video not loading problem

Question

Hi, when the "preview" link is clicked it is meant to change the video script and video swf using the innerHTML method, however in IE 7+ the flash seems to appear but never loads the video i.e. it just stays white.

<script>
function changeVideo(filename,script) {document.getElementById('video').innerHTML =
'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="610" height="400" id="movie" align=""><param name="'+filename+'"
value="'+filename+'.swf"><embed src="'+filename+'.swf" quality="high" width="610"
height="400" name="'+filename+'" align="" type="application/x-shockwave-flash" plug
inspage="http://www.macromedia.com/go/getflashplayer"&gt;';
document.getElementById('mainText').innerHTML = script;
}
</script>

--//--

 <div id="video">

 </div>

 <div id="mainText">
 <p style="margin-top:0px;">Some Text</p>
 </div>

 <div id="videoSelector">
    <div class="videoPolaroid">
       <div class="videoThumb"><img src="images/preview-image.jpg" /></div>
       <div class="videoCaption">Caption</div>
       <div class="videoPreview"><a href="#" onclick="changeVideo('robots','<p><b>Some more text<\/b><\/p>'); return false;">Preview</a></div>
       <div class="videoDownload"><a href="#">Download</a></div>
    </div>
 </div>

I intended for the javascript to take 2 parameters, the video file name and the HTML text that's to be placed in the "mainText" div.

Any help would be greatly appreciated, thanks.

Answer 1

Try using swfobject in this case you can use the function

function changeVideo(filename,script){
    swfobject.embedSWF(filename, "video", "610", "400", "9.0.0");
    document.getElementById('mainText').innerHTML = script;
}

Remember to include swfojbect javascript file in your page. You can fetch the file from Google's CDN check here