Trying to embed an object in an innnerHtml

[DonGlover]

I have following snippet of code:
embededvideo = '<object width="425" height="344">' +
'<param name="movie" value="' + url + '&hl=en&fs=1"></param>' +
'<param name="allowFullScreen" value="true"></param>' +
'<embed src="' + url + '&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>' +
'</object>' ;
document.getElementById("videoout").innerHTML = embededvideo;

When I just pump text or simple html in it works fine, when I try to pump in the <object> it never loads. So can this be done?

[rainarts]

Here we just create a division to hold the video we want to play. (Feel completely free to modify or eliminate the style).

<div id='videoPlayback' style='width: 435px; height:350px;background-color: #800000;'></div>

Next we embed all the videos we want to be on the list, just like we did with the cancel only here we will add a small style to the division tag that will make the videos invisible. Remember, the id needs to be a unique name.

<div id='selectDemo1' style='display: none'>
<object width="425" height="350">
 <param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param>
 <param name="wmode" value="transparent"></param>
 <embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1" 
  type="application/x-shockwave-flash" wmode="transparent" 
  width="425" height="350">
 </embed>
</object>
</div> 
<div id='selectDemo2' style='display: none'>
<object width="425" height="350">
 <param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param>
 <param name="wmode" value="transparent"></param>
 <embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1" 
  type="application/x-shockwave-flash" wmode="transparent" 
  width="425" height="350">
 </embed>
</object>
</div>

Then add a bunch of links which call a small Javascript function that will insert a copy of a hidden video into the playback division when the user clicks on a link.

<A HREF="#" onclick='returnplayVideo (&quot;selectDemo1&quot;,&quot;videoPlayback&quot;)'>RvD2: Ryan vs. Dorkman 2</A><BR>
<A HREF="#" onclick='returnplayVideo (&quot;selectDemo2&quot;,&quot;videoPlayback&quot;)'>Beatboxing Flute <q>Peter and the Wolf</q></A><BR>

finally let javascript do the work

<script type="text/javascript">
function playVideo(sourceId,targetId) {
 if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);}
 if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);}
 targetId.innerHTML=sourceId.innerHTML;
 return false;
} </script>

Hope this sample helps you

[jscheuer1]

I'd be willing to guess that on at least some browsers this wouldn't work out too well with Flash. But feel free to go ahead and try it. It has been my experience that often, even after removing code for Flash from a page, the browser's Flash plug-in will continue to play the audio portion if any. Other problems could arise as well. The best method I've seen for switching out videos using HTML and javascript, employ an iframe into which each video is loaded, usually from a separate page for each video.

There are Flash implementations around that allow you to play videos (.flv files at least, perhaps even entire .swf files) from a playlist. These work better in my opinion.

[DonGlover]

Turned out that I had a typo in the urls I was trying to insert into the embed object.
Once I resolved that it all works w00t!