Prototype Need help extracting 'title' parameter

[piers]

First I'll apologize for not knowing enough about javascript in
general, let alone Prototype - I hope someone will take pity on me

I'm building a page that displays quicktime movies when clicking on a
horizontal scrolling thumbnail - okay, no problems with that.

I'm using a code snippet I've found (and hacked) to embed the
quicktimes, as follows:

<script>
function setMovie( url )
{
 $('movieHost').innerHTML = '';
 var elEmbed = document.createElement( 'embed' );
 elEmbed.src = url;
 elEmbed.setAttribute("width", "100%");
 elEmbed.setAttribute("height","100%");
 elEmbed.setAttribute("scale","aspect");
 elEmbed.setAttribute("bgcolor","black");

 $('movieHost').appendChild( elEmbed );
}

new Ajax.Request( 'Quicktimes/movies.xml', {
 method: 'get',
 onSuccess: function( transport ) {
   var movieTags = transport.responseXML.getElementsByTagName
( 'movie' );

   $('movieList').innerHTML = '';

   var bFirst = true;
   for( var b = 0; b < movieTags.length; b++ ) {
     var url = movieTags[b].getAttribute('xxx');
     var title = movieTags[b].getAttribute('title');
     if ( bFirst )
     {
       setMovie( url );
       bFirst = false;
     }
     var html = '<a href="javascript:void setMovie(\''+url+'\');">';
     html += title+'</a><br/>';
     $('movieList').innerHTML += html;
   }
 }
} );
</script>

But instead of extracting from the 'movies.xml' file I'm invoking
setMovie via:

<a href="#" class="thumbnail" onClick="setMovie('Quicktimes/
mov1.mov')" onmouseover="MM_effectAppearFade('thumb1', 0, 0, 100,
false)" onmouseout="MM_effectAppearFade('thumb1', 0, 100, 0,
false)"><img src="thumbs/mov1.gif" alt=""/></a>

(When the user clicks on a thumbnail).

So I'm guessing that the xml file is no longer a factor.

What I'm looking to do is extract the 'title' attribute from the
current playing quicktime movie and display it in a div on the
page....

But I'm not sure how to wrangle the js to do that... and not sure
where (or how) to add the 'title' parameter.

Any help with this would be much appreciated - thanks!

[ohgod]

if you're hard coding the movie names in those links like that couldn't you just have it update the div while it's loading the movie? you already have the function there and the data you need in it.

in your Ajax.Request you have an onSuccess parameter that has

var movieTags = transport.responseXML.getElementsByTagName
( 'movie' );

in it. is there "title" tag associated with the "movie" tag in your xml? you would just yank it out and use it if so.

[piers]

hey, ohgod - thanks for the reply!

it would seem so... except that the movies are linked so the playlist continues from wherever the user decides based on clicking a thumbnail. This means that hard coding in the title would only mean that the title would be correct for the first movie... and then not change when the movie was updated to the next in line, right?

I'm wondering if there's not some way to 'listen' for the movie that's loading and change the title accordingly...

nightmare

[ohgod]

by hard coding i meant in the links that call your movie function... the information is already there!

so, in the function that builds your list of thumbnails, change

var html = '<a href="javascript:void setMovie(\''+url+'\');">';

to

var html = '<a href="javascript:void setMovie(\''+url+'\',\''+title+'\');">';

and change your display function to accept and use the second argument...

function setMovie( url, title )
{
 $('movieHost').innerHTML = '';
 var elEmbed = document.createElement( 'embed' );
 elEmbed.src = url;
 elEmbed.setAttribute("width", "100%");
 elEmbed.setAttribute("height","100%");
 elEmbed.setAttribute("scale","aspect");
 elEmbed.setAttribute("bgcolor","black");

 $('movieHost').appendChild( elEmbed );

 $('titlediv').innerHTML = title;
}

the other method you're looking for here with passing the attributes within the html is a little more work with no benefit in this case. but for reference:
http://prototypejs.org/api/element/writeAttribute
http://prototypejs.org/api/element/readAttribute

[piers]

First I'd just like to say how much I appreciate your help! Thank you..

Your code suggestions are invaluable... and they work great.

At some point, though, I'm planning on using the A<URL> T<frame> method within Quicktime to link each movie together so that if the user DOESN'T click on a thumbnail the entire playlist plays through - one movie after another. If, then (for example) the user clicks on thumbnail 4 (of 12, say) - then Movie #4 would load... and if the user didn't click on any other thumbnails - then the rest of the playlist from that movie onwards would play out.

So, while I've incorporated your code (and it's a vast improvement ), I'm wondering what will happen when Quicktime replaces the current (clicked) movie with a url call to the next... I'm assuming, coz the title data is hard coded into the thumbnail, that the title to the 'clicked' movie would remain (even though the playlist had moved on to the next movie)..

Quicktime have removed the ability to call javascript functions directly from within a quicktime movie (in a security update).. but I'm thinking I could embed a hidden i frame in the page and instead use the onload method to call a function if I call a url (from within the movie) that targets the hidden i frame.

If that makes any sense, then I would need a second display function that used only the 'title' argument... am I right? The problem is I already HAVE an onload function:

<BODY onload="setMovie('Quicktimes/mov1.mov')">

.. as I want the first movie to 'autoplay'. This is going to mean that Mov1 will just reload again and again (when the hidden i frame is populated), rather than the next movie in line, right?...

Maybe you have a suggestion for a better approach.... and again - thanks for your time and help.

[ohgod]

i am unfamiliar with the quicktime api, how are the variables:

At some point, though, I'm planning on using the A<URL> T<frame> method within Quicktime to link each movie together

created\populated?

[piers]

Well... it used to be that you could embed a javascript call within a quicktime movie that executed at a preset frame (or elapsed time) within the movie (and embedded within the movie in much the same way as a 'subtitle' track, or 'chapter markers' might be). For obvious reasons, Apple decided that represented a security risk - but url's can still be called... so, the thinking is to change the url from javascript: to http:// protocol, and load a new page into a hidden (0px by 0 px) Iframe. The new page calls the function in the parent page when it loads. For the user, the experience should be the same as if the movie had called the function directly.

So an example might be:

[00:01:30.15] 
A<http://www.apple.com> T<myframe>

This automatically loads an HTML frame called "myframe" with the URL "http://www.apple.com" at 1 minute, 30.5 seconds into the movie.

[ohgod]

well, just have the onload call the frame in the same way that the video will. or rather, it might have to call a function that will simulate what quicktime is doing. i don't believe the video tinkering with the frame will trigger the onload, so it would in theory autoplay and then continue as you want.

[piers]

So as each new movie loads it triggers a reload anyway... so just use that that event, you mean?

I think the

<BODY onload="setMovie('Quicktimes/mov1.mov')">

event is creating some trouble for me as I seem to have a 'double' or 'false' start when the first movie plays (plays for a bit then jumps to the beginning again. I wish there was a way I could figure to get the first movie playing without resorting to a body onload event.

And I'm still not sure how to use a body onload event to set the correct title for whichever movie is playing at the time....

[ohgod]

i don't see how there is a problem if you're loading the video into a frame

[piers]

Yeah - I thought maybe something was causing to page to reload.. but maybe not.

Anyway, I think I've figured everything out now (at least to the point where it's workable).. maybe the next step is to upload the whole mess and finish linking/debugging..

Thanks for your help!