Jquery Slideshow - Using Video

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>

Select allOpen 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>

Select allOpen 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

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>

Select allOpen 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"

Select allOpen in new window

hope this what you want.

Regards,

Asif Ahmed Khan

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?

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>

Select allOpen in new window

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?

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

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" />

Select allOpen in new window

Hope this will help you.

Regards,

Asif Ahmed Khan

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!

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>

Select allOpen in new window

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?

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.

I have windows7 here with me

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.

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?

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.

Still working away as this issue and can't figure it out yet.  Ideas?