Forums

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.

$(document).ready(function () {
				$('.videoListItem#aoiexplained').addClass('videoListCurrent'); //Highlights first video in list
				
//Load the first video
$('#videoPlayer').prepend('<img src=\"images/ajax-loader.gif\" alt=\"loading\" class=\"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('<img src=\"images/ajax-loader.gif\" alt=\"loading\" class=\"loading\"/>');
					$('#videoPlayer').load('videocontent.php #'+currentVideo+'', function() {
						$('.loading').remove();
					});
				});
			});

This is the code from that external file:

<div id=\"aoiexplained\" class=\"videoContainer\"><h3>The AOI Explained</h3>
	<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"
	codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0\" width=\"340\"
	height=\"250\">
		<param name=\"movie\" value=\"video/video1.swf\">
		<param name=\"autoPlay\" value=\"true\">
		<param name=\"quality\" value=\"high\">
		<param name=\"allowFullScreen\" value=\"true\">
		<embed src=\"video/video1.swf\" quality=\"high\" allowFullScreen=\"true\" autoPlay=\"true\"
		pluginspage=\"http://www.macromedia.com/go/getflashplayer\" type=\"application/x-shockwave-flash\" width=\"340\"
		height=\"250\"></embed>
	</object> 
</div>

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.


<div id=\"aoiexplained\" class=\"videoContainer\"><h3>The AOI Explained</h3>
<script type=\"text/javascript\">
			var flashvars = {};
			flashvars.myVideoPath = \"video/video1.flv\";
			var params = {};
			params.play = \"false\";
			params.wmode = \"transparent\";
			params.allowfullscreen = \"true\";
			var attributes = {};
			swfobject.embedSWF(\"flv_player.swf\", \"myAlternativeContent\", \"330\", \"250\", \"9.0.0\", false, flashvars, params, attributes);
		</script>
		<div id=\"myAlternativeContent\">
			<a href=\"http://www.adobe.com/go/getflashplayer\">
				<img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" />
			</a>
		</div>
</div>

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?

treehouse : what would you like to learn today?

Forums

swfobject and jQuery .load