video carousel using jquery
Choosing your jQuery Plugin This is a crucial decision that will be reflected in the outcome of your carousel, especially if you have a video player included on your slides.
A very popular jQuery plugin that I usually use is Cycle Plugin; however, after including a video and testing it on all browsers I found that there is a critical issue with IE9: It doesn’t show the video player and there is no way to make it appear. This is unfortunate because Cycle Plugin is very flexible and easy to program, but I do not recommend it in this case.
The second option will be a plugin called Coda Slider. It is not as complete as Cycle plugin, but it solves the IE9 issue and it is easy to install on your site.
The disadvantage of this plugin is the lack of support and its poor flexibility when trying to build custom features. For instance, if you need to change the slide effect or to create play and resume functions, you might have to do them manually.
Installing Coda Slider Plugin on your site
Download the zip file
Follow the installation guide
Including HTML5 on you Carousel
You need to have a code similar as the following for each slide:
<div class="panel">
<article id="slide_info">
<img src="img/slide2.png"/>
<h1>Slide Title</h1>
<p>Slide Description Text</p>
<video width="320" height="200" controls="controls" >
<source type="video/mp4" src="http://www.808.dk/pics/video/gizmo.mp4"></source>
<source type="video/webm" src="http://www.808.dk/pics/video/gizmo.webm"></source>
<source type="video/ogg" src="http://www.808.dk/pics/video/gizmo.ogv"></source>
<img src="img/video_not_supported.png"/>
</video>
</article>
</div>
Let me know how this works when implementing an HTML5 carousel in your site.
References:
jquery.malsup.com/cycle/
www.ndoherty.biz/tag/coda-slider/
The comments are owned by the poster. We aren't responsible for its content.