HTML5 Blue Video Gallery

Created: 28/06/2011
By: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support Forum: http://dzs.net/support/

Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, please feel free to apply for membership on the forum, it's the fastest way of support [ link to the left ] and post a thread about your question after your membership is validated.

Intro
Installation
Integrating the component in your html file
Customising the component
FAQ
Other notes

A) Intro - top

This gallery uses the latest html5 tehniques. For example – it uses HTML5 LocalStorage to remember the last volume you had before you exit and sets back that volume when you come back. All the player graphics are driven by CSS so you can change anything very easy. The gallery works in all major browsers environment – including IE through flash fall-back. Also, by inputting a single video in the video gallery, it becomes a video player; so you purchase one product, and you have two.

B) Installation - top

All you have to do for installing on your site (ie. yoursite.com) is copy the contents of the /source folder to a folder (ie. yourfolder) on your site via ftp ( with filezilla ) or any other upload service. You can then access your contents via http://yoursite.com/yourfolder.

C) Integrating in your html file - top

In order to install this component in your html page you need to:

open the download package, copy the folder \videogallery and preview.swf
open your html file and insert this inside your <head> tag

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="videogallery/vplayer.css"/>
<link rel="stylesheet" type="text/css" href="videogallery/vgallery.css"/>

<script type="text/javascript" src="videogallery/vplayer.js"></script>
<script type="text/javascript" src="videogallery/vgallery.js"></script>
insert this in your <body> tag where you want the slider to appear

<div id=" yourId " style="width:500px; height:300px; overflow:hidden;">
<div id="video1" class="vplayer" data-description="<img src='thumb.png' class='imgblock'/>Big Buck" data-img="img/1.jpg">

---data-description :the thumb that will represent the video in the menu

<video controls preload data-description="description text">

--- different video types for all browsers;
--- data-description : description text (when click info button);

<source src="video/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="video/test.webm" type='video/webm; codecs="vp8, vorbis"'/>
<source src="video/test.ogg" type='video/ogg; codecs="theora, vorbis"'/>

----- backup for IE

<object width="500" height="300">
<param name="movie" value="vplayer.swf?video=video/test.flv"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="opaque"></param>
<embed src="vplayer.swf?video=video/test.flv" type="application/x-shockwave-flash" width="500" height="300" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
</embed>
</object>

</video>

// the rest of videos

</div></div></div>

<script>
jQuery(document).ready(function(){
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
if($.browser.chrome){
setTimeout(function(){ init(); }, 2000);
}
else
init();
})
function init(){
jQuery('#yourId').vGallery({
menuWidth:150,
menuSpace:5,
randomise:"on",
autoplay:"off"
})
}
</script>
Modify the width and height according to your project ( the location where appears bolded above )
All done!

D) Customise It - top

Recommended Programs

You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:

.html - Dreamweaver CS5
.js - Aptana Studio3.0

So previously you seen this big list of parameters. Let's explain most of them:

menuWidth : 150, -width of the menu
menuSpace : 5, - space between the movie and menu
randomise : "on" - on/off -option for movies to appear random
autoplay : "on" - on/off -option for autoplay

E) FAQ - top

What's the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

How do I change the skin?

Replace width desired images

/videogallery/img -folder

and then modify the css: (vplayer.css)

.preview{ /*---- preview image ----*/
z-index:98;
position:absolute;
}
/* --------------------- menu buttons ---------------------- */
.vplayer .background{
height:30px;
position:absolute;
background:#131313;
bottom:0;
}

/****** info/ description *****/
.vplayer .info{ /*---- info icon ----*/
position:absolute;
left : 15px;
top : 15px;
cursor : pointer;
z-index: 89;

background:url('img/info.png');
width:50px;
height:50px;
}
.vplayer .infoText{ /*---- description ----*/
position: absolute;
top : 95px;
left : 30px;
opacity:0;
}
.vplayer .descriptionText{
background-color:#111111;
color:#ffffff;
padding:10px;
opacity:0.8;
}

/******* play *********/
.vplayer .playcontrols{
position : absolute;
bottom:0px;
left :0px;
cursor : pointer;
}

.vplayer .playSimple{
position:absolute;
left:0px;
bottom:0;
background:url('img/play.png');
width:33px;
height:28px;
}

.vplayer .playHover{
position:absolute;
left:0px;
bottom:0;
opacity:0;
background:url('img/playh.png');
width:33px;
height:28px;
}

.vplayer .stopSimple{
position:absolute;
left:0px;
bottom:0;
background:url('img/stop.png');
width:33px;
height:28px;
visibility:hidden;
}

.vplayer .stopHover{
position:absolute;
left:0px;
bottom:0;
opacity:0;
background:url('img/stoph.png');
width:33px;
height:28px;
visibility:hidden;
}

/******* scrub *********/
.vplayer .scrubbar{
position : absolute;
bottom : 9px;
left : 45px;
cursor :pointer;
}

.vplayer .scrub-bg{
position:absolute;
left:0px;
bottom:0px;
background:#444;
}
.vplayer .scrub{
position:absolute;
left:0px;
bottom:0px;
background:#aaa;
}
/******* timing *********/
.vplayer .timetext{
position : absolute;
bottom : 5px;
font-size : 12px;
right: 90px;
}

/******* volume *********/
.vplayer .volumecontrols{
position : absolute;
bottom: 0px;
right : 80px;
cursor: pointer;
}
.vplayer .volumeicon{
position:absolute;
bottom:0px;
left:0px;
background:url('img/volumeicon.png');
width:14px;
height:28px;
}
.vplayer .volume_static{
position:absolute;
bottom:2px;
left:16px;
background:url('img/volumestatic.png');
width:26px;
height:24px;
}
.vplayer .volume_active{
overflow:hidden;
position:absolute;
bottom:2px;
left:16px;
background:url('img/volumeactive.png');
width:26px;
height:24px;
}
.vplayer .volume_cut{
overflow:hidden;
visibility:hidden;
position:absolute;
bottom:2px;
left:0px;
background:url('img/volumecut.png');
width:26px;
height:24px;
}

/******* fullscreen*********/
.vplayer .fscreencontrols{
position: absolute;
bottom : 30px;
right : 50px;
cursor : pointer;
}
.vplayer .full{
overflow:hidden;
position:absolute;
top:2px;
left:16px;
background:url('img/full.png');
width:33px;
height:28px;

}
.vplayer .fullHover{
overflow:hidden;
position:absolute;
top:2px;
left:16px;
opacity:0;
background:url('img/fullh.png');
width:33px;
height:28px;
}
.vplayer .full{
position:absolute;
top:2px;
left:16px;
}

/******** Right Menu **************/
.navigationThumb{ /*---- thumbs ----*/
padding-top:5px;
height : 71px;
color : #FFF;
background-color :#000;
position : absolute;
left : 0px;
cursor : pointer;
}
.sliderMain{
position:relative;
overflow:hidden;
}

.controls{
position: absolute;
z-index: 99;
top :0px;
}

/*******************************/

F) Other notes - top

Thank you!

Digital Zoom Studio

Go To Table of Contents