HTML5 Carousel with Video Player

Nowadays, many people are looking to add a rotating carousel to their homepage. Using a carousel or slider is a great way to make your site more dynamic and engaging.

Before starting you should first analyze what are your goals and in which devices you need the carousel and player to work. Deciding goals and devices first will help you avoid issues later on, especially with browser compatibility.

Why use HTML5 on your Carousel?

• Better performance

• Cleaner code that will be easy to maintain

• No Flash plugin necessary to play your videos

• Excellent for mobile devices

The main cons are related to browser compatibility, especially with older versions of Internet Explorer (IE6, IE7). These versions tend to ignore the HTML elements that they don’t understand meaning the, tag <video> will not be rendered (to get these tags to function, you either need to put an image or a text message instead or encourage your visitors to update their browsers to newest versions).

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

1. Download the zip file

2. Follow the installation guide

Including HTML5 on you Carousel

You need to have a code similar to 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.