Big Buck Video
Here you can have a video description of your choosing.
You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.
this is another tag
this a tag you set
This is an Vimeo video
The thumbnail can autogenerate...
Gallery on iPad
A video advertisment of your choosing will play before this video.
3D Car Showroom
Here you can have a video description of your choosing.Big Buck Audio
Here you can have a video description of your choosing.You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.
This is an image
Here you can have a video description of your choosing.Other Demos / Customizations
Features
Vimeo & YouTube Streaming
The gallery lets you stream YouTube and Vimeo videos by just entering the video ID. With YouTube you can even have your custom controls via their awesome API.
All browsers compatible
Works on all major html5 browsers - Mozzila Firefox, Google Chrome, Apple Safari, Microsoft IE9 and Opera. Even works on IE6-IE8 via flash fallback.
Optimized for Mobile / Responsive
Works in responsive layouts. Works on iPads and iPhones. Works on Android devices. This gallery has been engineered to work glabally.
Customize Everything!
The gallery offers three skins for the video player and two for the video galllery and if that is not enough, all the skins are 100% css ( SASS enabled ) so if you have a little CSS knowledge, you can accomplish anything.
Advertisment Support
Insert your own ads before the video plays - image, video, youtube support.
Tag Support
Want to showcase a specific part of the video in a specific time ? It's no problem with DZS Video Gallery, tags are supported, any size, any time and any description.
Video Gallery API
Take advantage of the awesome features packed in this gallery - including it's own API. You can do things like.
Go to Demo Video
Images and Audio Support
Besides videos, the gallery can also render image and audio files, so it's actually more then a video gallery, it is a media gallery!
Install in minutes
It's very easy to include the gallery in your project. Featuring advanced documentation included and sample project ( example from preview included too ) to make installation as smooth as possible.
Customize From Gallery to Player
You can have a description here. HTML encoding is not a problem. Special characters like & are also accepted.
Player Demo - Simple video player, Light Skin
This gallery is very flexible. Maybe you don't need the full functionality of a video gallery and you need just a video player. It's very easy to take off the menu and morph into a video player.
As it can be seen, the skin is different from the first example. Both skins are included and new skins are very easy to do because the CSS is divided into two parts - functional and estethic. This skin, for example, took only 10 minutes to be put togheter.
This example does not cue the video. So using the video player like this saves lots of bandwidth because video will only load when it's activated by a click.
Just 2 formats needed
Most video players require you to have your video encoded in four formats. But as it can be seen from the graph in the right, only two formats can be enough to cover all platforms / major browsers.
So with our instructions ( included in the documentation ), you'll be able to convert your videos serve to all your visitors in less then 5 minutes ( for videos that are less then 10 minutes ) with some great free tools available. - if you do not have them already ready for html5 stream
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:
- unpack the download package, open the source folder
- copy the folder /videogallery and preview.swf into your project folder
- open your html file and insert this inside your <head> tag
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="videogallery/vplayer.css"/>
<script type="text/javascript" src="videogallery/vplayer.js"></script> - 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="vg1" 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>
- Modify the width and height according to your project ( the location where appears bolded above )
- insert this inside just before the ending of the </body>
- All done!
Customisable Parameters for each item
data-videoTitle
the title that appears in the top left of the video
data-type
the type of the video - youtube / vimeo / audio / image / video
data-description
title and description of the video that appears in the menu item of the glalery - html accepted
data-source*
the source of the video which means
youtube video id for youtube type
vimeo video id for vimeo type
mp4 / m4v file location for video type
mp3 file location for audio type
image path for image type
data-sourcem4
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 )
Both the gallery and video player are highly customizable.
Javascript Video Player Settings
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
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
menu_position
the menu position - right / left / up / down / none
transition_type
choose between fade and slideup