Grow your CSS skills. Land your dream job.

swfobject and jQuery .load

  • # June 30, 2010 at 4:06 pm

    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(‘loading‘);
    $(‘#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(‘loading‘);
    $(‘#videoPlayer’).load(‘videocontent.php #’+currentVideo+”, function() {
    $(‘.loading’).remove();
    });
    });
    });

    This is the code from that external file:

    Code:

    The AOI Explained

    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="340"
    height="250"> pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="340"
    height="250"/>

    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?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".