swfobject and jQuery .load

[brianatlarge]

Here’s my situation.

I have several SWF’s that load their own FLV. On my page, I have a list of videos. When you click on one of the items in that list, it uses the jQuery .load method to grab a specific <div> in another file that contains an SWF. This works great.

Code:

$(document).ready(function () {
$(‘.videoListItem#aoiexplained’).addClass(‘videoListCurrent’); //Highlights first video in list

//Load the first video
$(‘#videoPlayer’).prepend(‘‘);
$(‘#videoPlayer’).load(‘videocontent.php #aoiexplained’, function() {
$(‘.loading’).remove();
});
//Highlight video in list
$(‘.videoListItem’).hover(function() {
$(this).toggleClass(‘videoListHover’);
});
//Load clicked video
$(‘.videoListItem’).click(function() {
var currentVideo = $(this).attr(‘id’);
$(‘.videoListItem’).removeClass(‘videoListCurrent’); //Unhighlight videos in list
$(‘.videoListItem#’+currentVideo+”).addClass(‘videoListCurrent’); //highlight current video in list
$(‘.videoContainer’).remove();
$(‘#videoPlayer’).prepend(‘‘);
$(‘#videoPlayer’).load(‘videocontent.php #’+currentVideo+”, function() {
$(‘.loading’).remove();
});
});
});

This is the code from that external file:

Code:

The AOI Explained

I’m tired of making a new SWF for every new video I add, so I’ve started using swfobject to pass the value of the FLV path into a single SWF, so I don’t have to make a new SWF any time I want to add a new video.

Code:

The AOI Explained

This works great by itself in a test file, but unfortunately, I think that loading that div in dynamically is interfering with the swfobject javascript because it’s only displaying the alternate code.

Is there a way I can use swfobject and only load the videos in when I click in a certain link?

[Author]

Posts