Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Need help extracting 'title' parameter

    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:

    Code:
    <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:

    Code:
    <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!

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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
    Code:
    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.

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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
    Code:
    var html = '<a href="javascript:void setMovie(\''+url+'\');">';
    to
    Code:
    var html = '<a href="javascript:void setMovie(\''+url+'\',\''+title+'\');">';
    and change your display function to accept and use the second argument...

    Code:
    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

  • Users who have thanked ohgod for this post:

    piers (06-17-2009)

  • #5
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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:

    Code:
    <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.
    Last edited by piers; 06-15-2009 at 06:42 PM.

  • #6
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    i am unfamiliar with the quicktime api, how are the variables:
    Code:
    At some point, though, I'm planning on using the A<URL> T<frame> method within Quicktime to link each movie together
    created\populated?

  • #7
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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:

    Code:
    [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.

  • #8
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #9
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    So as each new movie loads it triggers a reload anyway... so just use that that event, you mean?

    I think the
    Code:
    <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....

  • #10
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    i don't see how there is a problem if you're loading the video into a frame

  • #11
    New Coder
    Join Date
    Jun 2009
    Posts
    63
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •