Getting jQuery function to fire when video is clicked

Question

I've set up a function to pause the sound in an mp3 player whenever certain things are clicked on the page, using ExternalInterface, but I'm having a problem in IE.

The setup is this: I have a video page that calls up a list of YouTube videos using RSS. The most recent video is displayed on the page in a div called "display". Then all the rest of the videos in the feed are displayed as thumbnails and links...If you click one of them, then the main 'display' video is replaced and it starts playing. All of that works fine.

What I want is for the mp3 player on the page to pause the music whenever a video is started.

The ExternalInterface function works properly. Whenever one of the LINKS is clicked, the mp3 player stops and the video starts, etc.

The problem is that I also want it to stop when the MAIN video is clicked. Obviously, since this is an external video loaded from YouTube, I can't access the FLA to add its own ExternalAccess code.

I've tried adding an ID to the video object and then using it as the selector in jQuery to call the stopMovie function...no go. I've tried adding a class to it, and then calling the stopMovie function when the class is clicked. I've tried putting the click function on the div that the video loads into...nothing works. If I remove the main video and just have an empty div, then click the div, the mp3 player stops...but if I load the video into the div and click it, nothing happens (in IE...it DOES work in FF).

Obviously jQuery isn't getting the message that the video has been clicked. Any suggestions or workarounds?

The Actionscript:

import flash.external.ExternalInterface;

ExternalInterface.addCallback("stopMovie", pauseSound);

function pauseSound(str:String):void {
    if (str == "stop") {
            if (my_channel) {
            song_position = my_channel.position;
            my_channel.stop();
            song_paused=true;
            }
    }
}

The jQuery code:

function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
}


function stopMovie() { 
    getFlashMovie('audio').stopMovie("stop");
            }

//showing all the methods I have tried //

$('#video_player').live("click", function(){
    stopMovie();
    });
$('.stopper').live("click", function(){
    stopMovie();
    });
$('#curVideo').live("click", function(){
    stopMovie();
    });
 $('#display object').live("click", function(){
    stopMovie();
    });

The HTML:

<div id="video_player">
<div id="display">

(some PHP code here to call the feed)

<object id="curVideo" class="stopper" width="410" height="332"><param name="movie" value="<?php echo $videolink; ?>"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="transparent"></param><param name="allowscriptaccess" value="always"></param><embed src="<?php echo $videolink; ?>" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="410" height="332"></embed></object>
</div>
</div>

Answer 1

I'm guessing that IE isn't firing a click event for the actual swf object.

Have you tried to put the event handler on the #display div instead?

Answer 2

I'm not sure this will solve your problem but for what it's worth - I had a Flash issue with IE where the object embed would always be topmost and would not allow the surrounding html structure to show based on z-index css. What I did is set the wmode param to transparent and that fixed it. Perhaps something similar is happening here where the video is topmost just in IE and burying the surrounding div that you have your events bound to.