Changing Object Param value for embedded video file

Question

I am looking to change the source param as well as embed param in a video object when my user clicks on a link and I just can't seem to get the new videos to display. The default video that is loaded in the parameters works just fine, just not sure what to do in order to get the new video loaded. here is my script and HTML.

<div id="videoPlayerDiv" style="height: 350px; width: 350px;">
<div id="videoTable">
    <table>
        <tr>
            <td><b>Trading Videos</b></td>
        </tr>
        <tr>
            <td>--></td><td><a href="#" onclick="playVideo('tradingOverview');">Trading Overview</a></td>
        </tr>
        <tr>
            <td>--></td><td><a href="#" onclick="playVideo('multiAccount');">Multi-Account Trading Wizard</a></td>
        </tr>
        <tr>
            <td>--></td><td><a href="#" onclick="playVideo('globalUnlock');">Global Unlock</a></td>
        </tr>
    </table>
</div>
<div id="videoPlayer" style="display:none; height: 250px; width: 250px;">
    <object id="objViewer" width="250" height="250" type="video/x-ms-asf" data="Wildlife.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
        <param name="url" value="Wildlife.wmv">
        <param name="filename" VALUE="Wildlife.wmv">
        <PARAM name="autostart" VALUE="0">
        <param name="uiMode" value="full">
        <param name="autosize" value="1">
        <param name="playcount" value="1">
        <EMBED TYPE="application/x-mplayer2" src="Wildlife.wmv" NAME="MediaPlayer" id="wmvViewer" autostart="false"
            WIDTH="250" HEIGHT="250" ShowControls="1" ShowStatusBar="0" ShowDisplay="0"> 
        </EMBED>
    </OBJECT><br/>
    <a onclick="returnVideos();">Return to Videos</a>
</div>

followed by the code;

function playVideo(x){
$("#videoTable").attr("style","display:none;");
$("#videoPlayer").attr("style","display:block;");

var videoToPlay = x;
switch(videoToPlay){
    case 'tradingOverview':
        //alert(videoToPlay);
        var newElement = "Wildlife.wmv";
        $("#wmvViewer").attr('src', newElement);
    break;
    case 'multiAccount':
        //alert(videoToPlay);
        var newElement = "BabyBoyMainBackground.wmv";
        $("#wmvViewer").attr('src', newElement);
    break;
    case 'globalUnlock':        
        var newElement = "Panel_Mask.wmv";
        $('#objViewer').find('embed').attr('url', newElement);
        $('#objViewer').find('embed').attr('filename', newElement);
        $("#wmvViewer").attr('src', newElement);
        //alert(videoToPlay);
    break;
}
}
function returnVideos(){
$("#videoTable").attr("style","display:block;");
$("#videoPlayer").attr("style","display:none;");
}

basically in the switch statement, depending on what video the user pressed to view i want to change the following parameters;

and

changing all of those values to the new video file declared. the different cases above are jsut different things i was trying but nothing worked. Any help would be greatly appreciated. Thank you all!

Answer 1

good evening. I had the same problem, with changing the source parameter of an object, which was meant to display a Virtual Reality scene, from a file on a local storage. Setting the corresponding attribute value of a param object in JavaScript was not able to set the source path of the selected media file.

So indeed, it must be created from code a new instance of the player object, and added again to the HTML document, each time you change the source. The easiest way to do this, is to add the "objViewer" object to a div HTML element, that you have already defined, the element with id="videoPlayer". You can remove the viewer object from that div, by using the innerHTML property, in the following way:

var str; 
// Set the statements, as the object it's written in HTML... 
// 

var panel = document.getElementById("videoPlayer"); 
panel.innerHTML = ""; 
panel.innerHTML = str; 

Where the str variable string was previously set with the HTML code, as the object is written in HTML file, but with changed values of the parameters "filename" and "url".

Here is a function in JavaScript, through I can set my viewer control, anytime I want to change the path of the scene being displayed:

var path = String.fromCharCode(34); 
path = path.concat(document.getElementById('ID_FILE1').value); 
path = path.concat(String.fromCharCode(34)); 

if (path == '""') return;           
if ((path.indexOf('.wrl') == -1) && (path.indexOf('.wrz') == -1)) return; 

var str = '<OBJECT width="800" height="600" classid="CLSID:86A88967-7A20- 
    11d2-8EDA-00600818EDB1">'; 
str = str.concat(String.fromCharCode(13)); 
str = str.concat(' <PARAM id="paramID" name="Scene" value=')
str = str.concat(path); 
str = str.concat('>'); 
str = str.concat(String.fromCharCode(13)); 
str = str.concat(' id="viewerID" </OBJECT>'); 
str = str.concat(String.fromCharCode(13)); 

var panel = document.getElementById("ID_PANEL1"); 
panel.innerHTML = ""; 
panel.innerHTML = str;  

You must change, just the parameters names and their values, as necessary. If the control must be displayed into a new page, then a body element could be used instead of that division,

var wnd = window.open("", "explorer"); 
var doc = wnd.document; 

wnd.name = "Viewer";            
doc.body.innerHTML = str; 

var param = doc.getElementById("paramID"); 
param.setAttribute("name", "Scene"); 
param.setAttribute("value", path); 

wnd.focus(); 

str = '<EMBED width="1340" height="670" src='; 
str = str.concat(path); 

doc.writeln(str);           
doc.writeln(' type="application/x-cortona"'); 
doc.writeln(' pluginspage="http://cortona3d.com/cortona"'); 
doc.writeln(' contextmenu="true" vrml_background_color="#CDCDCD" 
    vrml_dashboard="true" id="viewerID">');             

doc.getElementById("viewerID").setAttribute("Scene", path); 

Actually the attribute of a parameter should be set also, because I had an extra parameter, whose value couldn't be changed otherwise.

I hope, this method would be of any help. With kind regards, Adrian Brinas.

Answer 2

After some research i discovered the best way to do this was rebuilding the entire object element in code in my switch case and adding it to the .html() property of the div which was successful.

function playVideo(x){
    $("#videoTable").attr("style","display:none;");
    $("#videoPlayer").attr("style","display:block;");
    $("#videoPlayer").html("");

    var videoToPlay = x;
    switch(videoToPlay){
        case 'tradingOverview':
            //alert(videoToPlay);
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='Wildlife.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='Wildlife.wmv'><param name='filename' VALUE='Wildlife.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='Wildlife.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
        break;
        case 'multiAccount':
            //alert(videoToPlay);
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='BabyBoyMainBackground.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='BabyBoyMainBackground.wmv'><param name='filename' VALUE='BabyBoyMainBackground.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='BabyBoyMainBackground.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
        break;
        case 'globalUnlock':        
            var newElement = "<object id='objViewer' width='250' height='250' type='video/x-ms-asf' data='Panel_Mask.wmv' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='Panel_Mask.wmv'><param name='filename' VALUE='Panel_Mask.wmv'><PARAM name='autostart' VALUE='0'><param name='uiMode' value='full'><param name='autosize' value='1'><param name='playcount' value='1'><EMBED TYPE='application/x-mplayer2' src='Panel_Mask.wmv' NAME='MediaPlayer' id='wmvViewer' autostart='false' WIDTH='250' HEIGHT='250' ShowControls='1' ShowStatusBar='0' ShowDisplay='0'></EMBED></OBJECT><br/><a onclick='returnVideos();'>Return to Videos</a>";
            $("#videoPlayer").html(newElement);
            //alert(videoToPlay);
        break;
    }
}