最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

html - Controlling embedded windows media player with javascript - Stack Overflow

programmeradmin4浏览0评论

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 ponents..." 
        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 ponents..." 
        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?

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 ponents..." 
        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 ponents..." 
        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?

Share Improve this question asked Sep 26, 2011 at 9:52 anothershruberyanothershrubery 21k16 gold badges56 silver badges101 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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();

I think it should be where 'S' in stop is capital

document.getElementById("Video1Div").Stop();

Instead of

document.getElementById("Video1Div").controls.stop();
发布评论

评论列表(0)

  1. 暂无评论