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.
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 one format 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. And only one because of full flash player backup.
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
Google Chrome | ||||
Apple Safari | ||||
Mozzila Firefox | ||||
Opera | ||||
Microsoft IE9 | ||||
IE7 / IE8 |
Install Instructions.
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!
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
location of the mp4 format of the video ( or m4v )
location of the ogg format of the video ( or ogv )
location of the webm format of the video
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.
controls opacity when video player is focused
only for skin customization purposes - scrubbar width offset
only for skin customization purposes - background width offset
autoplay the first video on / off
autoplay the next video on / off
the menu position - right / left / up / down / none
choose between fade and slideup
Responsive
From mobile to HD, DZS Video Gallery are ultra responsive. Also has retina graphics.
Customizable
Customize DZS Video Gallery with the many options included.
SEO Friendly
Built with SEO in mind, DZS Video Gallery parses html content into working magic.