Controlling embedded windows media player with javascript

Question

I have embeded a few videos which I need to display if a link is clicked. so what I am trying to do is click a link and it will display a video, which the user can press play on. If they click another link, the previous video stops and a new video will be displayed. The current HTML structure I have is:

<div>
    <ul>
        <li><a onclick="ShowVideo(0);" href="javascript:void(0);" class="CalltrackLink">Missed Opportunities</a></li>
        <li><a onclick="ShowVideo(1);" href="javascript:void(0);" class="CalltrackLink">Create User</a></li>
    </ul>
</div>
<div>
    <div id="Video1Div" style="display:none">
        <OBJECT id="Video1" width="640" height="480" 
        STANDBY="Loading Windows Media Player components..." 
        CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
        type="application/x-oleobject">

            <PARAM NAME="URL" VALUE="Video1.mp4" />
            <PARAM NAME="SendPlayStateChangeEvents" VALUE="True" />
            <PARAM NAME="AutoStart" VALUE="False" />
            <PARAM NAME="ShowControls" value="True" />

        </OBJECT>
    </div>
    <div id="Video2Div" style="display:none">
        <OBJECT id="Video2" width="640" height="480" 
        STANDBY="Loading Windows Media Player components..." 
        CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
        type="application/x-oleobject">

            <PARAM NAME="URL" VALUE="Video2.mp4" />
            <PARAM NAME="SendPlayStateChangeEvents" VALUE="True" />
            <PARAM NAME="AutoStart" VALUE="False" />
            <PARAM NAME="ShowControls" value="True" />

        </OBJECT>
    </div>
</div>

I have the following javascript which I got from various sources on the internet:

function ShowCalltrack(i) {
    $('#Video1Div').hide();
    $('#Video2Div').hide();

    document.getElementById("Video1Div").controls.stop();    
    document.getElementById("Video2Div").controls.stop();

    if(i == 0)
    {
        $('#Video1Div').show();
    }
    else if(i == 1)
    {
        $('#Video2Div').show();
    }
}

When I run this I get the error:

Unable to get value of the property 'stop': object is null or undefined

If I remove the offending code then, when the user clicks another link the previous video will still be playing, and you can hear the audio, if the user did not manually stop the video.

I was able to stop the previous video by using this code:

var Video1 = document.getElementById("Video1Div");
var Video1Text = Video1.innerHTML;
Video1.innerHTML = '';
Video1.innerHTML = Video1Text;

this does stop the video from playing, however, the problem with this is, if you go back to a link which you had previously opened the video will resume from where it left off with previously, and I need to to start again from the start.

Any ideas?

Answer 1

Your addressing the DIV element, not the control which has ID Video1;

var Wmp = document.getElementById("Video1");
if (Wmp.controls.isAvailable('Stop'))
   Wmp.controls.stop();