Jquery Slideshow - Using Video

Hello Experts,

I'm working with this slide show called "JSiderNews Plugin" found here:  http://www.queness.com/community-news/4988/15-must-see-jquery-slideshow-plugins-and-tutorials
You can click on the DEMO button to try it out.  See the Features/Specs about the slide show.

I want to know if I can use a video as one of the slides.  Maybe the first slide could be a video, there after images?  Can you please help me to determine how this can be done?  

Also, what if I do not want to use the black transparent box on the image.  Can this be removed where we would have no html text for one particular slide while leaving the black box on the other slides?
webgirl29Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

khan_webguruCommented:
Hello Bro!

I downloaded that source and tried to fixed your second problem that above transparent box with information should not be there so solved it successful. Its very simple.

Currently for a slide following code is in use:

 
<li>
       	  <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >            
          	<div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a> 	<i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 3</h2>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li>

Open in new window


But If you want to show just image without info transparent upper div the remove all other tags and leave image tag as it is like below

 
<li>
       	  <img src="images/thumbl_980x340_003.png" title="Newsflash 3" >                      	
        </li>

Open in new window


If you do this for "LI" then that will only show images no transparent box above that.

Now I am going to look into video on first slide hopeful it will take half an hour if that will possible. I will post about that in half an hour. Meanwhile test above mentioned things.

Regards,

Asif Ahmed Khan
0
khan_webguruCommented:
Hello Bro!

I implemented that and test on my side now first slide is video that will be play in media player you can use any player by changing <object> tag Class ID I used media player.

The source you downloaded from demo of that just change the first <li> contents. add following code.

 
<li>
        		
                <object title="Newsflash 1" width="700px" height="350px" id="MediaPlayer1" width="180" height="200"
                    classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
                    codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
                    standby="Loading Microsoft® Windows® Media Player components..."
                    type="application/x-oleobject" align="middle">
                    <param name="FileName" value="images/New Cam 082.mpg">
                    <param name="ShowStatusBar" value="True">
                    <param name="DefaultFrame" value="mainFrame">
                    <param name="autostart" value="false">
                    <embed type="application/x-mplayer2"
                    pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"
                    src="images/New Cam 082.mpg"
                    autostart="false"
                    align="middle"
                    width="176"
                    height="144"
                    defaultframe="rightFrame"
                    showstatusbar="true">
                    </embed>
                </object>
        </li>

Open in new window


Remove first <LI> and add above mentioned <LI> and change your video path as per your desire video at two places that are mentioned below:

 
<param name="FileName" value="images/New Cam 082.mpg">

&

 defaultframe="rightFrame"

Open in new window


hope this what you want.

Regards,

Asif Ahmed Khan
0
webgirl29Author Commented:
Thanks for helping with the transparent box.  Yes, I removed it successfully.  Just wanted it as another option.

Having some trouble getting a video to pull in.  Would be great if it could pull in a video straight from YouTube.  Tried pulling in a generic video like from Google's YouTube page like this and it didn't work:

<param name="http://www.youtube.com/watch?v=yi50KlsCBio" value="images/New Cam 082.mpg">

Then I tried to pull in a .flv file directly from my desktop, and that didn't work either.  Do I have to run this page from a server first?

Also, what other types of video players can I use?  Can you give me examples of others besides Windows media player?  (classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95")  How did you get the class ID.  Where does that come from.  From the Windows media site?  What are other options?

By the way, when you opened this page (from the files you downloaded) did you get a message at the top of your screen about "running ActiveX?"  Will that always appear?  I don't want users to have to accept this.  I don't want the webpage to have these restrictions.  Any knowledge of this?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

webgirl29Author Commented:
Not sure if you found a solution, but after doing some more research I found this video player method:
http://videojs.com/#html5-video

I just copied this code from this page: http://sandbox.thewikies.com/vfe-generator/
and it worked.  Since I do want my slide show to be less wide, about the width of this video player actually, I made the slideshow width:640px by height:360px.  

Any comments about this?  Seems to support HTML 5 which I need to learn more about, but also supports those browsers that don't have html 5 and reverts to flash or allows the user to download the video for themselves.  

So in between my first <li></li> tags I added the code attached.  (I included the <li> tags)
If you can look at this, I'd really appreciate it. I  just now need to figure out to have the video "stop playing" when I advance to the next slide.  Can you take a look?
<li>
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
		<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
	</object>
</video>
<p>
	<strong>Download video:</strong> <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p> 
</li>

Open in new window

0
webgirl29Author Commented:
Hello.  Following up on this question. Any comments on the video code I mentioned above?  Seems to be working fine when added to my slideshow.  Now I need to find out how to have the slideshow stop working once I advance to the next slide.  Any ideas?
0
khan_webguruCommented:
Hello webgirl29,

Sorry I couldn't remain in touch with you but happy to hear that your problem almost has been solved. But about the video stopping I want to explain that when you click the next button there would be some mechanism of this control that might be just show or hide or some other techniques so what we can do is that we can set video property start as default means auto play. Let me look into this I will let you know how you can implement auto start and stop.

Regards,

Asif Ahmed Khan

0
khan_webguruCommented:
Hello,

Just add "AUTOPLAY" option in <video> tag like below:

 
<video controls="controls" autoplay="autoplay" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />

Open in new window


Hope this will help you.

Regards,

Asif Ahmed Khan
0
webgirl29Author Commented:
Haven't tried this yet, will do later today, but you're saying that if I use the code above, the video will STOP playing when the user clicks to view the next slide?  Because right now it still plays as you can hear the music in the background and going back to slide one it's still playing. OK, I will test out the code above and let you know.  Will get a chance later.  Thank you!
0
webgirl29Author Commented:
Hello.  I just tried this code and it's not working.  Maybe I didn't implement it correctly?  It works on your end?  I just added autoplay="autoplay" to the code as you showed and it's not allowing the video to stop playing when I go to the next slide.  You can still hear the audio in the background and when going back to slide 1, the vide is still playing.  Did I add the code correctly?


 
<video controls="controls" autoplay="autoplay" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
	<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
	<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
		<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
		<param name="allowFullScreen" value="true" />
		<param name="wmode" value="transparent" />
		<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
		<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
	</object>
</video>

Open in new window

0
webgirl29Author Commented:
Plus, I wanted to change the auto: true, in the javascript on the page.  I just changed it to "true" so that the video should play automatically when the page opens, and when it finishes it goes to slide 2 and so on.  Can you help?
0
khan_webguruCommented:
Struggled but finally done!

Now its up and running here with me.

1

Just download the files

2

place the index.html with your's one.

3

and script.js with old file that is in "js Folder"
CHEERS!

hope thats what you want.

what happening

First slide is video that is playing on load
when you will change the slide it will stop
and again when you will be back on that it will play automatically.

Regards,

AAK index.html script.js
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
webgirl29Author Commented:
Hello.  Thank you so much for helping.  Sorry I didn't get back to you sooner, but after doing some testing with the code you sent, it only seems to work in Google Chrome and Safari, but not IE8 or Firefox.  I'm on Windows.  I'm guessing you're testing on a Mac?  Did you test on Windows?  Are you having problems getting the video to stop playing when advancing to the next slide when in Windows IE8 or Windows Firefox?  I so much appreciate your ongoing help in trying to resolve this.  Hoping we can find a solution together soon.  Let me know.

Thanks.
0
khan_webguruCommented:
I have windows7 here with me
0
webgirl29Author Commented:
Ok.  Same here. Sounds good.  Are you runnig these files on a server or from your desktop like me?  When I opned them up, they're not playing correctly in Windows IE or FF and by you they are,... hmm.  Unless I set it up wrong, but it does stop as I want it to in Google Crome and Windows Safari.  Thinking...  That "js" file you attached is the only .js file to use, yes?  If I place the new "index.html" and the new "script.js" file in a totally separate folder, it should work?  Just trying to figure it out.
0
webgirl29Author Commented:
Actually, I know you need the other files of course as well.  I just copied into a new location all the files from the download.  I completely replaced the index.html file here with yours... and replaced the script.js with yours as well in the "js" folder.  I'm now running the "index.html" file on my Windows 7 computer and I see the same thing.  The video does Not stop playing, and I can hear the audio, when advancing to the next slide. Sorry.  Ideas please?
0
webgirl29Author Commented:
Hello thkhan_webguru:  It's been a while.  I'm hoping we can continue this disscusion.  I'm still having trouble getting the same results you are.  I have this running off of my desktop and the video is still playing in the background when advancing to the next slide.  Can you continue to help me figure out why?  I really need to get this resolved and you've been a great help.  Just not seeing how to gett he video to stop playing in the background when advancing slides.  Thanks.
0
webgirl29Author Commented:
Still working away as this issue and can't figure it out yet.  Ideas?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.