asked on

onclick change quicktime movie

Here is the problem I'm currently facing:

I have a web page with an image in it, on that image there are html area shapes (map) On that same page there is also a quicktime movie.

<div id="movie">
<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480" height="360" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" id="mainmovie">
<param name="src" value="docs/movies/poort.mov">
<param name="autoplay" value="true">
<param name="loop" value="false">
<param name="controller" value="true">
<embed src="docs/movies/poort.mov" name="mainmovie" width="480" height="360" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/" enablejavascript="true"></embed>
</object>
</div>

When the page loads the standard quicktime is loaded.
Now what I need to do is: when a shape is clicked then another movie should load instead of the standard one (in the same quicktime player)

Till now, I'v tried two ways, both unsuccessfully.

1.
Code of the area shape href: <area shape="circle" coords="458,49,8"
href="javascript:changeMovie('Kerkhof1');">

Function changeMovie:
function changeMovie(moviename){
original_url=document.mainmovie.GetURL();
alert (original_url);
url="docs/movies/"+moviename+".mov";
alert (url);
document.mainmovie.SetURL(url);
}

This does not work, as you can see I used some alerts to see what was happening. It seems the URL is the full URL and can not be defined relatively. This should be necessary since the page can be on several undefined servers and computers. With this example I see a broken quicktime icon.

2.
Code of the area shape href: <area shape="circle" coords="458,49,8"
href="javascript:changeMovie('docs/movies/Kerkhof1');">

Function changeMovie:
document.getElementById('movie').innerHTML='<object
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="480"
height="360" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab"
id="mainmovie"><param name="src" value="docs/movies/Kerkhof1.mov"><param
name="autoplay" value="true"><param name="loop" value="false"><param name="controller" value="true"><embed src="docs/movies/Kerkhof1.mov"
name="mainmovie" width="480" height="360" autoplay="true" loop="false"
controller="true" pluginspage="http://www.apple.com/quicktime/"
enablejavascript="true"></embed></object>'

As you can see I simply try to change the content of the div tag. The result is the quicktime movie goes blank.

Does anyone know an descent way to be able to load a movie in an embedded quicktime player when a link is clicked?

Thanks in advance

Michel Plungjan

try

<area shape="circle" coords="458,49,8" onClick="changeMovie('Kerkhof1'); return false" href="#">

Poutrelle

ASKER

same problem, i get the broken quicktime logo.

Thx anyway :)

Michel Plungjan

to create the original full url you can do

original_url=document.mainmovie.GetURL();
url=original_url.substring(0,original_url.lastIndexOf('/'))+moviename+".mov";

Poutrelle

ASKER

after i added another "/" to the url string it seems to work:

url=original_url.substring(0,original_url.lastIndexOf('/'))+"/"+moviename+".mov";

it is a work arround, maybe you know how i do not have to add that extra / ?
either way, the points are yours :)

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Poutrelle

ASKER

thanks, that does the trick :)