I'm trying to run live channels using vlc on my webpage using a multicast address/udp but can't get it to work properly

This code in the video display div works:
<script language="JavaScript" type="text/javascript">
var uri = "udp://@239.0.10.103:1234"
var VLCPlayerObject = '<object id="vlc" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width=720px height=720px classid="CLSID:9BE31822-FDAD-461B-AD51-BE1D1C159921" events="True"><PARAM NAME="ShowDisplay" VALUE="True"><PARAM NAME="AutoPlay" VALUE="True"><PARAM NAME="Src" VALUE=' + uri + '><PARAM NAME="fullscreen" VALUE="True"></object>\n';
document.write (VLCPlayerObject);
</script>

However I need the user to be able to switch channels on the same page and if I turn the above code into a function which is called when the user presses a button that passes the right udp number the vlc video replaces the entire page.
So I resorted to use the following code (runs in its own js file):

VLCPlayerObject = '<object id="vlc" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width=720px height=720px classid="CLSID:9BE31822-FDAD-461B-AD51-BE1D1C159921" events="True"><PARAM NAME="ShowDisplay" VALUE="True"><PARAM NAME="AutoPlay" VALUE="True"><PARAM NAME="Src" VALUE=' + uri + '><PARAM NAME="fullscreen" VALUE="True"></object>\n';

document.getElementById('videoDisplayDivID').innerHTML=VLCPlayerObject;

Heres the problem, I can hear the video playing but can't see anything. I added <p>blahblah</p> to each end of the VLCPlayerObject and they do come up on the site but in between them no video.

So how can I get this video to show up? What am I doing wrong?
If not is there another way for me to do this that doesn't require me to create a page for every single channel?