You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.
You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.

Features

Other Demos

You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.
MP4
WEBM
OGG
FLV
Google Chrome
Apple Safari
Mozzila Firefox
Opera
Microsoft IE9
IE7 / IE8

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

  1. unpack the download package, open the source folder
  2. copy the folder /videogallery and preview.swf into your project folder
  3. open your html file and insert this inside your <head> tag

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <link rel="stylesheet" type="text/css" href="videogallery/vplayer.css"/>
    <script type="text/javascript" src="videogallery/vplayer.js"></script>

  4. insert this inside your <body> tag where you want the gallery to appear

    <div class="markupinthedocumentation" style="width:650px; height:300px;">
    <div class="preloader"></div>
    <div id="vGallery" class="markupinthedocumentation" style="width:638px; height:300px; opacity:0;">
    <div class="markupinthedocumentation" data-videoTitle='Big Buck Bunny' data-description='<img src="img/thumb.png" class="imgblock"/><div class="the-title">Big Buck Video</div>Here you can have a video description of your choosing.' data-sourcemp4='video/test.m4v' data-sourceogg='video/test.ogv'></div>
    <div class="markupinthedocumentation" data-videoTitle='YouTube Video' data-type="youtube" data-src="7Ab7UOUtN_Q" data-description='{ytthumb}<div class="the-title">This is an YouTube video</div>The thumbnail can autogenerate...'></div>
    </div>
    </div>

  5. Modify the width and height according to your project ( the location where appears bolded above )
  6. insert this inside just before the ending of the </body>
  7. All done!

 

Customisable parameters

 

data-videoTitle - optional - the title that appears in the top left of the video.

data-description - optional - title and description of the video that appears in the menu item of the glalery - html accepted

data-sourcemp4 - location of the mp4 format of the video ( or m4v )

data-sourceogg - location of the ogg format of the video ( or ogv )

data-sourcewebm - location of the webm format of the video

data-sourceflash - location of the mp4 format of the video ( or m4v or flv or H.264 .mov )

 

Javascript Video Player settings

 

Both the gallery and video player are highly customizable.

autoplay - only matters if you are using it independent of the gallery - autoplay video on / off

videoWidth / videoHeight - only matters if you are using it independent of the gallery - video player size

constrols_out_opacity - controls opacity when video player is not focused

constrols_normal_opacity - controls opacity when video player is focused

design_scrubbarWidth - only for skin customization purposes - scrubbar width offset

design_background_offsetw- only for skin customization purposes - background width offset

 

Javascript Video Gallery settings

 

Both the gallery and video player are highly customizable.

menuSpace - space between the menu and video player

menuitem_width / menuitem_height - the menu item size

menuitem_space - the space between menu items

autoplay - autoplay the first video on / off

autoplayNext - autoplay the next video on/off

randomise - randomise video gallery items

menu_position - the menu position - right / left / up / down / none

transition_type - choose between 'fade' and 'slideup'

design_skin - choose between 'skin_default' or make your own following the instructions from bellow

videoplayersettings - the video player settings object

design_scrubbarWidth - only for skin customization purposes - scrubbar width offset

design_background_offsetw- only for skin customization purposes - background width offset