Swap image for streaming video

Need to replace innerhtml with object and embed

[Igau]

Hi there... I've got a vaguely complex problem that I really cant solve on my own (due to my lack of JavaScript experience)... I am wondering if anyone can help me?

Basically I'm trying to switch an image file for a video of the same size without using frames or horrible stuff that makes the page coding messy and generally more likely to have formatting problems.

I looked around on the web and found some basic code (which I'm using) for replacing the innerhtml of div tags (by ID), here it is:

function changeContent(id,shtml) {
 if (document.getElementById ¦¦ document.all) {
 var el = document.getElementById? document.getElementById(id): document.all[id];
 if (el && typeof el.innerHTML!= "undefined") el.innerHTML = shtml;
 }
}

The problem seems to be that while the code for my image is obviously short, the code required to embed a movie isn't by any means...and I'm not sure how to get around the javascript (at least I assume it's the javascript) problem of max string lengths and so on, which I believe are causing me the biggest problem.

This is the code for the div that will contain both the image and the video.

  <div id="objectcontainer">
  
  <a href="#" onclick="changeContent('objectcontainer',video1)">
  <img src="img/vid_1.jpg" width="240" height="176" />
  </a>
  
  </div>

....and here is the code that I need to go inside the div:

<object id="MediaPlayer" width="240" height="196" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
  standby="Loading Microsoft® Windows® Media Player components..." type="application/x-oleobject"
  codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
  
  <param name="filename" value="video/video1.mpg">
  <param name="autoStart" value="false">
  <param name="showControls" value="true">
  <param name="ShowStatusBar" value="false">
  <param name="Autorewind" value="false">
  <param name="ShowDisplay" value="false"> 
  
  <embed src="video/video1.mpg" type="application/x-mplayer2" name="MediaPlayer"
  autostart="0" showcontrols="1" showstatusbar="0" autorewind="0" width="240" height="190"
  showdisplay="0"></embed>
  
  </object>

Can anyone help me achieve this?
To clarify, I put the whole section of HTML above in a variable called video1 using single quotes.

[Purple Martin]

The solution is actually very simple. You put all your HTML code for the video into one JavaScript string variable (using single quotes to define the variable as you correctly mentioned, because the HTML already contains double quotes).

Here's the handy hint that makes it easy: HTML doesn't need line breaks, it can all go on one line. Therefore you can define your JavaScript variable in one go, just take out the line breaks from the HTML for the video so it's all on one line:

shtml = '<object id.........etc.........embed></object>'

One more hint: you can change the innerhtml of any tag, not just divs. So it would be appropriate to wrap your original image in a span tag with an id attribute, and then change the innerhtml of the span.

HTH