Table of Contents

  1. Intro
  2. Install
  3. Integrate in your html project
  4. Integrate it in your flash project
  5. Customise It
  6. FAQ
  7. Developer Tips

DZS Video Gallery

Created: 27/02/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 - top

DZS Video Gallery is the ultimate gallery for your videos. Its the only gallery that can display YouTube videos and videos from your server in the same container. It can be used as a portfolio or a video showcase. You choose. It is XML driven and only needs a simple text editor to be set up. It can be embedded in html ( just drag and drop with your favorite html editor ), can be used stand-alone and also can be integrated in your flash project very easy.

 

Installation - top

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

Recommended: Some web servers don't have html5 video support yet. So if you notice your videos do not work ( and were properly uploaded ) an easy fix is to add this to to your .htaccess file:

AddType video/ogg ogv
AddType video/webm .webm
AddType video/mp4 .mp4

 

Integrating in your project - top

There are several ways to include the gallery in your project depending on the features you need - w/o flashobject - w/o html5 gallery

Flash Gallery - simple install

  1. open the download package, copy the folder /xml and /video and preview.swf into your page folder
  2. open your html file and insert this inside your <body> tag where you want the gallery to appear

    <div class="flashgallery-con>
    <object type="application/x-shockwave-flash" data="preview.swf" width="915" height="360" id="flashcontent" style="visibility: visible;">
    <param name="movie" value="preview.swf"><param name="menu" value="false"><param name="allowScriptAccess" value="always">
    <param name="scale" value="noscale"><param name="allowFullScreen" value="true"><param name="wmode" value="opaque">
    <param name="flashvars" value="xml=xml/gallery.xml">
    </object>
    </div>

  3. Modify the width and height according to your project and customize the gallery via gallery.xml
  4. All done!

Flash Gallery - swfobject install

  1. open the /deploy folder, copy the folders /js, /xml and preview.swf into your html folder
  2. open your html file and insert this inside your <head> tag
    <script type="text/javascript" src="js/swfobject.js"></script>
    <script type="text/javascript">
    var width = 915;
    var height = 360;
    var flashvars = {
    //if you specify a xml file the settings will be read from the xml file
    xml:"xml/gallery.xml"
    };
    var params = {
    menu: "false",
    allowScriptAccess: "always",
    scale: "noscale",
    allowFullScreen: "true",
    wmode:'transparent'
    };
    var attributes = {};
    swfobject.embedSWF("preview.swf", "flashcontent", width, height, "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>

    Important: This is where you modify the size to your component. In the width and height variables above.

  3. insert this in your <body> tag where you want the component to appear
    <div id="flashcontent">
    <h1>Alternative content</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a></p>
    </div>
  4. All done!

Flash Gallery and HTML5 Gallery - swfobject install - static version

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

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

    <link rel="stylesheet" type="text/css" href="videogallery/vplayer.css"/>
    <link rel="stylesheet" type="text/css" href="videogallery/vgallery.css"/>
    <link rel="stylesheet" type="text/css" href="videogallery/skin_white.css"/>
    <script type="text/javascript">
    var width=915;
    var height=360;
    var flashvars={xml:"xml/gallery.xml"};
    var params={menu: "false",allowScriptAccess: "always",scale: "noscale",allowFullScreen: "true",wmode:'opaque'};
    var attributes={};
    swfobject.embedSWF("preview.swf", "flashcontent1", width, height, "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    </script>

  3. insert this inside your <body> tag where you want the galleries to appear

    <div class="gallery-precon gp1">

    <div class="flashgallery-con">
    <div id="flashcontent1"></div>
    </div>

    <div class="videogallery-con" style="width:915px; height:360px; display:none;"><div class="preloader"></div>

    <div id="vg1" class="videogallery" style="width:640px; height:360px;">
    <div class="vplayer-tobe" data-videoTitle="Pages" data-description="<img src=thumbs/pages1.jpg class='imgblock'/><div class='the-title'>Pages</div>AE Project by Generator" data-sourcemp4="video/pages.mp4" data-sourceogg="video/pages.ogv" ><div class="videoDescription">You can have a description here if you choose to.</div></div>
    <div class="vplayer-tobe" data-videoTitle="Iron Man 2 - without ads" data-description="{ytthumb}<div class='the-title'>Iron Man 2 - without ads</div>This gallery lets you showcase youtube/local/vimeo movies togheter." data-type="youtube" data-src="FNQowwwwYa0" ></div>
    <div class="vplayer-tobe" data-videoTitle="This Gallery on iPad/iPhone" data-description="{ytthumb}<div class='the-title'>This Gallery on iPad/iPhone</div>Make sure you do not miss a single guest with this gallery." data-type="youtube" data-src="puj20NRu5VM" ></div>
    <div class="vplayer-tobe" data-videoTitle="Iron Man 2 - with an image ad" data-description="{ytthumb}<div class='the-title'>Iron Man 2 - with an image ad</div>This gallery lets you showcase youtube/local/vimeo movies togheter." data-type="youtube" data-src="FNQowwwwYa0" ></div>
    <div class="vplayer-tobe" data-videoTitle="Local Video - with a video ad" data-description="<img src=thumbs/ad1.jpg class='imgblock'/><div class='the-title'>Local Video - with a video ad</div>You can have your own ad play before the video. Very simple to setup!" data-sourcemp4="video/thunder.mp4" data-sourceogg="video/thunder.ogv" ><div class="videoDescription">You can have multiple thumbs showcasing your video.</div></div>
    <div class="vplayer-tobe" data-videoTitle="Thunder" data-description="<img src=thumbs/thunder1.jpg class='imgblock'/><div class='the-title'>Thunder</div>Another great project by Generator." data-sourcemp4="video/thunder.mp4" data-sourceogg="video/thunder.ogv" ></div>
    <div class="vplayer-tobe" data-videoTitle="Nature by Numbers" data-description="{ytthumb}<div class='the-title'>Nature by Numbers</div>A beautiful video displaying the wonders of nature" data-type="youtube" data-src="kkGeOWYOFoA" ></div>
    </div>
    </div>
    <script>
    var flashhtml5main = {
    defaultis : 'flash', //flash or html5
    target : 'gp1'
    }
    var videoplayersettings = {
    autoplay : "off",
    constrols_out_opacity : 0.9,
    constrols_normal_opacity : 0.9,
    design_scrubbarWidth:-201
    }
    jQuery(document).ready(function(){
    if (jQuery.browser.safari && document.readyState != "complete"){
    setTimeout( arguments.callee, 120 );
    return;
    }
    $("#vg1").vGallery({
    menuSpace:0,
    randomise:"off",
    autoplay :"off",
    autoplayNext : "on",
    menuitem_width:275,
    menuitem_height:76,
    menuitem_space:1,
    menu_position:"right",
    transition_type:"slideup",
    design_skin: "skin_default",
    videoplayersettings : videoplayersettings
    })
    flashhtml5(flashhtml5main);
    })
    </script>

    <div class="shadow"></div>
    <div class="html5-button-con"><div class="html5-button">Switch to HTML5</div></div>
    </div>

  4. Modify the width and height according to your project ( the location where appears bolded above )
  5. Edit the gallery from the gallery.xml file
  6. You can generate the italic part from the html5generator/ folder included in the package. You just need to copy it to a php enabled server ( can even be localhost ) , access it, copy / paste the xml there and submit, the html5 gallery will be returned for you.
  7. All done!

 

Integrating It in your Flash Project - top

  1. copy all the folders from the /source folder (ex. /zoom, /caurina) into the folder of your fla
  2. open videogallery.fla, open the library ( ctrl + L ) and copy all the items from there ( videogallery and /videogallery assets ) into the library of your fla
  3. in your fla, drag videogallery from the library to the stage where you want it to appear
  4. in videogallery.fla, select the actions layer, open the actions window ( F9 ) and copy the code from there in a layer from your fla
  5. all done!

Embed it in your project

Embed it in a as3 template

 

Customise It - top

Flash Video Gallery

List of all gallery parameters ( can be set from either FlashVars or XML )
List of parameters for each item
Instant Preview on scrubbar roll over

In the first preview you may notice thumbnail of the current video at the selected time appear above the scrubbar. This is done by making a folder with thumbnails named after the time which marks the respective moment in the video. For that we used a custom php extension on our localhost named ffmpeg. This is the code we used :

<?php
$ffmpegpath = "ffmpeg.exe";
$input = 'pages.flv';
$output = 'test.jpg';
$minute = '00';
$second = '00';

if (make_jpg($input, $second . '.jpg', $second)){
echo 'success';
}else{
echo 'bah!';
}

$second = '01';
make_jpg($input, $second . '.jpg', $second);
$second = '02';
make_jpg($input, $second . '.jpg', $second);

function make_jpg($input, $output, $fromdurasec="00") {
global $ffmpegpath;
$duration = 100;
if(!file_exists($input)) return false;
//$command = "$ffmpegpath -i $input -an -ss 00:00:$fromdurasec -r 1 -vframes 1 -f mjpeg -y $output";
$command = "$ffmpegpath -i $input -an -ss 00:00:$fromdurasec -s 60x35 -r 1 -vframes 60 -f image2 -y %02d.jpg";

@exec( $command, $ret );
if(!file_exists($output)) return false;
if(filesize($output)==0) return false;
return true;
}

Of course, the thumbs can be made manually too.

 

HTML5 Video Gallery

So let's explain the structure of the above so you can customize it to your needs.

The optional container & preloader
<div class="videogallery-con" style="width:650px; height:300px;">
<div class="preloader"></div>
</div>

This is optional and represents the container of the gallery and the preloader ( recommended )

The video gallery container

<div id="vGallery" class="videogallery" style="width:638px; height:300px; opacity:0;">

</div>

This is the main gallery contianer, you add gallery items inside. You can also modify size directly from the style attribute. Opacity is optional.

The video gallery item

<div class="vplayer-tobe" 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>

This is gallery item. Add as many as you wish inside the videogallery container.

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

var videoplayersettings = {
autoplay : "off",
videoWidth : 500,
videoHeight : 300,
constrols_out_opacity : 0.9,
constrols_normal_opacity : 0.9,
design_scrubbarWidth:-201,
design_background_offsetw : 0
}

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

$('#vGallery').vGallery({
menuSpace:0,
randomise:"off",
autoplay :"off",
autoplayNext : "on",
menuitem_width:275,
menuitem_height:76,
menuitem_space:1,
menu_position:'right',
transition_type:"slideup",
design_skin: 'skin_default',
videoplayersettings : videoplayersettings
})

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

Make your own skin
  1. duplicate skin_white.css to skin_custom.css for example
  2. import the skin_custom.css stylesheet in your html
  3. access skin_custom.css and replace all skin_white to skin_custom
  4. be crazy, with a little css knowladge ,the possibilities are endless

 


FAQ - top

You can check this link for a list of popular questions. Other questions you might have:

How do I add special characters ?

Access the source/videogallery.fla . Open with with Flash CS3 or more. Go to the button movieclip labeled Button - marked red in the image above. Then do the embedding of characters as shown here - http://blog.activeden.net/resources/common-questions-by-flashden-buyers/common-questions-using-special-characters-like/ .

Or simpler then that - instead of using preview.swf, use preview_all_chars.swf

How do I add an item [ from xml ] ?

Access the xml [ default : deploy/xml/gallery.xml ], and add the bolded lines, remember to change yourvideo to your actual video path:

<item>
<source>video/pages.flv</source><!--input here path to the video or video id (if type is vimeo or youtube)-->
<thumb>thumbs/slides.jpg</thumb><!--thumb that will appear in the menu-->
<title>Slides Video</title><!--title that will appear in the menu-->
<description><![CDATA[<font size="20">cev</font><br></br>ceva aceva ceva ceva]]></description><!--description that will appear in the video area, leave blank if you don't want it-->
<menuDescription>Something</menuDescription><!--description that will appear in the menu-->
<type>video</type><!--type - youtube/video/vimeo-->
</item>

<item>
<source>video/yourvideo.flv</source>
<thumb>thumbs/yourthumb.jpg</thumb>
<title>Slides Video</title>
<description><![CDATA[<font size="20">cev</font><br></br>ceva aceva ceva ceva]]></description>
<menuDescription>Something</menuDescription>
<type>video</type>
</item>

How do I add an youtube video [ from xml ] ?

Add this to the xml inside the <content>

<item>
<source>UXLvR6ZaZk4</source>
<title>Slides Video</title>
<description><![CDATA[<font size="20">cev</font><br></br>ceva aceva ceva ceva]]></description>
<menuDescription>Something</menuDescription>
<type>youtube</type>
</item>

Offcourse, you need to change the id to fit your desired video.

How do I access the designer center?

Just go to the location you have installed the gallery /designer ( the designer folder ) and click Save when you are happy with the changes.

What is an youtube ID?

Take this movie for example - http://www.youtube.com/watch?v=UXLvR6ZaZk4 . The youtube ID is just this part: UXLvR6ZaZk4

How do I display a YouTube's user videos [ via FlashVars ] ?

This is a variation of Method 2 of embedding in html

var flashvars = {
menuPosition:'right',
youtubeFeed:'on',
youtubeFeed_user:'digitalzoomstudio',
}

How do I add multiple videos [ via FlashVars ] ?

This is a variation of Method 2 of embedding in html

var flashvars = {
menuPosition:'right',
videos:'video/test.flv;video/test.flv',
titles:'video 1;video 2',
thumbs:'img/1.jpg;img/1.jpg',
}

I want to display a single video [ simple embed, no plugins required ]

This is a variation of Method 1 of embedding in html. You need to edit video/test.mp4 to your video path in both places:

<div class="flashgallery-con>
<object type="application/x-shockwave-flash" data="preview.swf" width="915" height="360" id="flashcontent" style="visibility: visible;">
<param name="movie" value="preview.swf"><param name="menu" value="false"><param name="allowScriptAccess" value="always">
<param name="scale" value="noscale"><param name="allowFullScreen" value="true"><param name="wmode" value="opaque">
<param name="flashvars" value="video/test.mp4">
</object>
</div>

How do I make my gallery viewable on the iPhone?

Use the html5 gallery example and make sure your videos are mp4 / m4v and are properly encoded ( recommended - Handbrake.fr ) and it should work with no problem.

How to make one of the icons to actually share on (ie. Facebook)?

You just give this as the link - http://www.facebook.com/share.php?u=http://yourlink.html.

How to integrate in WordPress ?

There is a WordPress version.

How about if I want a CMS / admin ?

Here is the admin version.

 
html5 gallery: How do I make my video properly encoded to use whitin the gallery ?

You need your movie converted to two formats in order to make sure the html5 video plays in all browsers.

Browser support & recommended encoding program

IE9, IE8 ( Flash ) & Safari : M4V -> http://handbrake.fr/

Chrome & Opera & Firefox : OGG-> http://video.online-convert.com/convert-to-ogg

 

html5 gallery: 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.

 

Developer Tips - top

This gallery provides source files ( in the source folder ) so if you are developer you can start cusmizing it.

Recommended Programs

You can generally use any text editing software to edit most content/code, but this is what I recommend:

The structure of the fla file -

 

Digital Zoom Studio

Go To Table of Contents