• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6737
  • Last Modified:

Flash Video Gallery using Jquery

I am trying to use jquery to show flash videos(swf) like a showcase and this is what I am trying to do:
Show a video by default and then have "<Prev" "Next>" below that so when an user click on prev or next, it will show  the next one and so on. When a video is clicked after making the selection it can either open the video on top of it in a bigger size  Or  play the video once right there once  they click the play button. I have seen examples for images and I tried those but it did not work with flash files.

Please let me know if anyone can guide me. I prefer using jquery as there are applications on the site that uses jquery.

Also, I just remembered one thing, how to stop the video if they navigate to the next one. This makes me think if its a good idea to do the gallery or showcase for flash videos. Please clarify my questions.

thanks
0
Igiwwa
Asked:
Igiwwa
  • 3
  • 2
2 Solutions
 
IgiwwaAuthor Commented:
Please let me know if there is any plugin or if there is an alternative way.
0
 
RoonaanCommented:
Hi,

Are you using any plugins for loading the flash, or do you work with plain html injection? Are you using jCarousel or another plugin for the general gallery navigation?
Do you use a static array of video's/thumbnails, or do you prefer/need/want a ajax based jQuery implementation that loads prev/next thumbnail when you click?

I might take some time to respond to clarifications as due to timezone differences.

Kind regards

-r-
0
 
IgiwwaAuthor Commented:
Hi,

thnaks for the reply. I guess right now, I will just go with hard coded method of pasting the embeded code as I will not have swf files to load it dynamically. I guess we would need the files to use ajax method. Is that correct?

I am trying to do something similar to the attached screen shot. If we click on the video 2 thumbnail, then it should change to video 2 on the above div and so on. when we try to navigate using "prev/next" then also it should do the same thing as clicking on thumbnails.

I created a test page based on the example by http://demos.flesler.com/jquery/serialScroll/
I will paste the sample code created based on the above example and there are two things which I couldn't figure out.
1) In Firefox, the div containing the next video also shows up.
2) Do not know how to stop one video if we navigate to the next one.

Hope I am clear in explaining my requirements.

If there is any other plug in that does this then I shall look into that and do accordingly.

I have attached the code. I just modified the css file to get eh layout I want  so I have pasted the css inside the html code itself. All the js files are pointing to the actual site.

I guess, the error in FF could be fixed but the main thing is stop the video when the next one is clicked.

thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	body{ 
	padding: 0 5px;
	font-family: Verdana, sans-serif;
	background-color: #DDD;
}
ul, li, h4, h3, h2, h1, p{
	padding:0;
	margin:0;
	list-style:none;
}
 
.next, .prev{
	cursor:pointer;
	width:24px;
	height:24px;
}
 
#screen{
	position:relative;
	height:300px;
	width:370px;
	margin-top:40px;
}
	
	#navigation{
		width:510px;
		text-align:center;
		margin-left:55px;
	}
		#navigation ul{
			margin-left:-5px !important;
			margin-left:-10px;
		}
			#navigation li{
				float:left;
				margin:0 0px;
				padding:5px 11px;
				background-color:#EEE;
			}
				#navigation a{
					color:#933;
					font-weight:bolder;
					text-decoration:none;
				}
	
#sections{
	overflow:hidden;
	background-color:white;
	width:375px;
	height:300px;
	clear:left;
	margin-left:50px;
	border:1px solid #ff0000;
}
	
	#sections ul{
		width:3500px;
	}
	
		#sections li{
			float:left;
			padding:0px 0px;
			margin-top:-16px;
			
			
		}
			/*to make it fall from the top*/
			#sections li.fallen{
				margin-top:369px;
			}
			
			#sections p{
				width:550px;
				margin:16px 0;
				margin-left:1px;
				font-size:85%;
				line-height:1.4em;
			}
			
			#sections h2{
				color:#993333;
				margin:20px 0pt;
			}
			#sections a{
				color:#777;
				font-weight:bolder;
				text-decoration:none;
			}
 
.clear{
	clear:both;
	width:0;
	height:0;
}
 
 
</style>
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/serialScroll/js/jquery.serialScroll-min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js'></script>
	<script type='text/javascript' src='http://demos.flesler.com/jquery/serialScroll/js/init.js'></script>
</head>
<body>
<div>Videos are from Youtube</div>
		<div id="screen">
		<div id="sections">
			<ul>
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>
 
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/Mcc-GkjkOvE&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Mcc-GkjkOvE&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>
				
				<li>
				<p><object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/b3NRuzQvuxA&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/b3NRuzQvuxA&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object></p>
				</li>	
			</ul>
 
		</div>
			<div style="margin-left:200px;align:center;">
			<img class="prev" src="http://demos.flesler.com/jquery/serialScroll/img/prev.gif" alt="prev" width="42" height="53" />
			<img class="next" src="http://demos.flesler.com/jquery/serialScroll/img/next.gif" alt="next" width="42" height="53" />
			</div>
			
			<div id="navigation">
			<ul>
				<li><a href="#"><img height="75" width="100" alt="2.Technical Analysis Lesson 2: An Introduction to Dow Theory" qlicon="VWRv9l6wrr8" class="vimg90" src="http://i3.ytimg.com/vi/VWRv9l6wrr8/default.jpg" title="2.Technical Analysis Lesson 2: An Introduction to Dow Theory"/></a></li>
				<li><a href="#"><img height="75" width="100" alt="What Happened to Bear Stearns Explained Simply Part 2" qlicon="40HCPneJUh0" class="vimg90" src="http://i1.ytimg.com/vi/40HCPneJUh0/default.jpg" title="What Happened to Bear Stearns Explained Simply Part 2"/></a></li>
				<li><a href="#"><img height="75" width="100" alt="80. Who Really Controls the Forex Market?" qlicon="IcL6-WEvUAA" class="vimg90" src="http://i2.ytimg.com/vi/IcL6-WEvUAA/default.jpg" title="80. Who Really Controls the Forex Market?"/></a></li>
			</ul>
			</div>
		
	</div>
	
	
 
</body>
</html>

Open in new window

video-ee.JPG
0
 
RoonaanCommented:
Hi,

The elements are not loading because the <object> don't get hidden by overflow:hidden.
When you would add a <li><p>Test</p></li> then you will notice that the plain text will be hidden, getting you the expected result.

The as to having the movies start automatically, you can use a setup like this:

We first build a javascript array holding the object tag html:

<script type="text/javascript">
  var preview = {};
  preview.firstmovie = '<object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object>';

  preview.secondmovie = '<object width="375" height="300"><param name="movie" value="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/IcL6-WEvUAA&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="375" height="300"></embed></object>';

</script>

Then instead of using the <object> code in your list items, we only use an image, with some onclick code:

have your <div id="sections"> look like this:

<div id="sections">
  <ul>
  <li><p><a href="#play" onclick="$('#preview').html(preview.firstmovie);"><img src="... preview image path " /></a></p></li>
  <li><p><a href="#play" onclick="$('#preview').html(preview.secondmovie);"><img src="... preview image path " /></a></p></li>
  </ul>
 </div>
 <div id="preview"></div>

You see that the onclick action puts some html inside the preview div. Because we want to stop the movie later on, we can just clear out the preview div with an onclick action on your prev/next buttons:

                        <img class="prev" src="http://demos.flesler.com/jquery/serialScroll/img/prev.gif" alt="prev" onclick="$('#preview').html('')" width="42" height="53" />
                        <img class="next" src="http://demos.flesler.com/jquery/serialScroll/img/next.gif" alt="next" onclick="$('#preview').html('')"width="42" height="53" />

Then you only need to position the preview div to be on top of the #sections div and you are good to go.

Kind regards

Hope this helps
0
 
IgiwwaAuthor Commented:
Hi,

thanks a lot for the reply. I modified  the code with your suggestions and its working fine except that I have to align the "preview" div over the "sections" div. I will try this. One more question: I am not sure if I can have an image in the sections box  instead of the video(as I have now) because  I just copy the youtube embed code from the website and save the thumbnail next to it. I am thinking if we can still show the object code in the sections window instead of an image. Please let me know if something is possible like this.

ps: the firefox issue(it was showing all divs) was fixed by adding the wmode:opaque.

thanks again.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now