HTML5 Video Slideshow

Full Screen HTML5 Video Slideshow

View Demo | Download Source Files
MOJO_THEMES_728_90_banner
I have created a fullscreen HTML5 video slideshow using a jQuery and HTML5 video player. This slideshow has a dot navigation controls to play the selected video. It can also autoplay the video slides once the video has finished playing and has a crossfade transition on moving to the next screen. I have also tried to maintain the fallback option for the browsers that doesn’t support HTML5 videos. This slideshow is not depended on any jQuery video plugins. However, Video.js and BigVideo.js has been a great inspiration and helpful to finish this HTML5 video slideshow.

Below are the key features of this slideshow:

  1. Auto Play
  2. Dot Navigation
  3. Full Screen
  4. Responsive

The videos in the slideshow has been used from the great website Beachfront B-Roll.

This slideshow is depended on the following javascript framework which you can easily download from the respective websites. Before start doing anything download jQuery library from jQuery.com and Modernizr from modernizr.com.


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script type="text/javascript" src="video/modernizr-2.5.3.min.js"></script>
<!-- Javascript library dependencies -->

Lets first do the HTML5 video markups. We have a total four videos in this slideshow and there are separate video tags for each. Currently, there are 3 types of video formats supported by different browsers and they are MP4, WebM, and Ogg. To learn more about HTML5 video w3schools is the best place to start. We also have a navigation controls to switch videos.

</pre>
<div class="videowrapper"><video id="example-video-0" width="960" height="540" class="bigvideo" autoplay="autoplay" poster="media/1.jpg"><source src="media/one.mp4" type="video/mp4" /><source src="media/one.mov" type="video/quicktime" /><source src="media/one.ogv" type="video/ogg" /><object id="example-video-0" width="960" height="540" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/media/one.mp4&poster=/wp-admin/media/1.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed id="example-video-0" width="960" height="540" type="application/x-shockwave-flash" src="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/media/one.mp4&poster=/wp-admin/media/1.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>



     <img class="bigvideo" src="media/1.jpg" alt="" />
</video>
<video id="example-video-1" width="960" height="540" class="bigvideo" poster="media/2.jpg"><source src="media/two.mp4" type="video/mp4" /><source src="media/two.mov" type="video/quicktime" /><source src="media/two.ogv" type="video/ogg" /><object id="example-video-1" width="960" height="540" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/media/two.mp4&poster=/wp-admin/media/2.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed id="example-video-1" width="960" height="540" type="application/x-shockwave-flash" src="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/media/two.mp4&poster=/wp-admin/media/2.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>



    <img class="bigvideo" src="media/2.jpg" alt="" />
</video>
<video id="example-video-2" width="960" height="540" class="bigvideo" poster="media/3.jpg"><source src="media/three.mp4" type="video/mp4" /><source src="media/three.mov" type="video/quicktime" /><source src="media/three.ogv" type="video/ogg" /><object id="example-video-2" width="960" height="540" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/media/three.mp4&poster=/wp-admin/media/3.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed id="example-video-2" width="960" height="540" type="application/x-shockwave-flash" src="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/media/three.mp4&poster=/wp-admin/media/3.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>



    <img class="bigvideo" src="media/3.jpg" alt="" />
</video>
<video id="example-video-3" width="960" height="540" class="bigvideo" poster="media/4.jpg"><source src="media/four.mp4" type="video/mp4" /><source src="media/four.mov" type="video/quicktime" /><source src="media/four.ogv" type="video/ogg" /><object id="example-video-3" width="960" height="540" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/media/four.mp4&poster=/wp-admin/media/4.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed id="example-video-3" width="960" height="540" type="application/x-shockwave-flash" src="http://webavenue.com.au/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/media/four.mp4&poster=/wp-admin/media/4.jpg" allowfullscreen="true" allowscriptaccess="true" /></object>



    <img class="bigvideo" src="media/4.jpg" alt="" />
</video></div>
<ul class="pagination">
	<li class="active"><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
</ul>
<pre>

Before, We get into the javascript code, Lets apply some stylesheet to the pages and videos. In order to achieve a cross fade animation We need to put all the videos in a same layer. Below, is the css code for.

body{margin:0;padding:0;}
.videowrapper{position:fixed;width:100%;height:100%;overflow:hidden;}
.bigvideo{position:absolute;top:0;left:0;opacity:0}
.allvideos{display:none;}

.pagination{
clear: both;
position:fixed;
top:0;
z-index:2;
}

.pagination li{
display: inline-block;
margin-right: 6px;
}

.pagination li a{
display: block;
text-indent: -99999px;
background: url(media/pagination.png) no-repeat -16px 0;
width: 12px;
height: 12px;
}

.pagination li.active a{
background-position: 0px 0px;
}

Now, its time to fit the videos and images in the browser in order to make it responsive and full screen. To make the video full screen and responsive we have a resize function which is called on window resize and window load event. Below is the javascript code on how to do it.

var video_width = 1280; // original width of your video
var video_height = 720; // original height of your video

$(window).resize(function() {
resize();
});

$(window).load(function () {
resize();
});

function resize() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
r_w = windowHeight / windowWidth,
i_w = video_width,
i_h = video_height,
r_i = i_h / i_w,
new_w, new_h, new_left, new_top;

if( r_w > r_i ) {
new_h = windowHeight;
new_w = windowHeight / r_i;
}
else {
new_h = windowWidth * r_i;
new_w = windowWidth;
}

$(".bigvideo").css({
width : new_w,
height : new_h,
left : ( windowWidth - new_w ) / 2,
top : ( windowHeight - new_h ) / 2
});
$('.bigvideo:first,img.bigvideo:first').animate({'opacity':1},1000);

}

Finally, its time to play with HTML5 videos from javascript. We have a play_video function which loads the HTML5 player object with the help of screenIndex variable. It also adds the event listener “ended” to the player so that when it ends we can switch to next available video which is handled by function next_play(). So, basically HTML5 video event “ended” is triggered after the video is finished playing. Below is the complete code that handles the slideshow.


$(document).ready(function(){

var screenIndex = 0,
preIndex,
myPlayer,
numScreens = $('.video-js').length,
transitionDur = 1000;

$('.pagination li a').on('click', function(e) {
e.preventDefault();
set_prev_index();
screenIndex = $('.pagination li').index($(this).parent('li'));
$('.pagination li').removeClass("active");
$('.pagination li').eq(screenIndex).addClass("active");

next_play();
});

play_video();

function play_video(){

if (Modernizr.video) {

myPlayer = document.getElementById('example-video-'+screenIndex);

myPlayer.addEventListener('ended', function() {

if(myPlayer.currentTime === myPlayer.duration){

preIndex = screenIndex;
if (screenIndex === (numScreens-1)) {
screenIndex = 0;

} else {
screenIndex++;
}

next_play();
}else{

myPlayer.currentTime = 0;
}

}, false);

myPlayer.play();
}

}

function set_prev_index(){
$('.pagination li').each(function(index){

if($(this).hasClass("active"))
preIndex = index;

})
}

function next_play(){

var oPlayer = document.getElementById('example-video-'+preIndex);
oPlayer.currentTime = 0;
console.log(oPlayer.currentTime);
$('#example-video-'+ preIndex).stop().animate({'opacity':0},1500);
$('#example-video-'+ screenIndex).stop().animate({'opacity':1},1000, function(){

$('.pagination li').removeClass("active");
$('.pagination li').eq(screenIndex).addClass("active");
play_video();

});

}

});

There are still lots of places to improve this slideshow to make it awesome and handling a graceful fallback options for old browsers. IF you want to know more about HTML5 videos events, Please Click Here.

2 comments for “HTML5 Video Slideshow

  1. James
    4 January, 2014 at 9:38 pm

    Thanks for this tutorial! 2 questions for you…

    How would you make it so that the slideshow is circular? Right now when it gets to the last video it just stops instead of going back to the first video.

    Is there a way to disable video entirely and just show the image for mobile devices? When I view this on an iPhone I see the poster frame and a play button. But because of the way iPhone’s and video works it just plays the video separately. But if the video is just meant to be an ambient background it isn’t of a whole lot of benefit to play it separately. So I’d prefer to just disable it entirely.

  2. pranali
    14 March, 2014 at 11:13 am

    Hi

    Thanks for this tutorial.
    Would you please help me and let me know How to make the slideshow circular?
    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *