CodeCanyon HTML5 Blue Video Gallery 122632

CodeCanyon HTML5 Blue Video Gallery 122632

CodeCanyon HTML5 Blue Video Gallery 122632
HTML5 Code \ Media
Flash \ Info \ Images \ Localstorage \ Volume \ Video \ Html \ Flashvars \ Fallback



HTML5 Code - HTML5 Blue Video Gallery 122632 by ZoomIt @ CodeCanyon

HTML5 Code \ Media

Last Update: 22 October 12; Compatible Browsers: IE7, IE8, IE9, Firefox 4, Safari 4, Safari 5, Opera, Chrome; Software Version: HTML5; High Resolution: No; Files Included: JavaScript JS, HTML, CSS.

Intro
Want a Video Gallery that is easy to install, to customize, works in all browsers ( even IE8 ), is up to the latest standards ( html5 ), has multimedia support too ( audio / images ) , can feed from video sharing providers ( youtube / vimeo ) ? Then this is the Video Gallery to showcase your videos on your site.
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.

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. The skin is setup via simple CSS – so it’s fully skin-able with basic CSS

Updates
UPDATE 4 .10 [ 10/22/2012 ]

- fixed fullscreen bugs ( works perfectly on Safari, Chrome, Firefox and future compliant browsers )

- added advertisement support – image / youtube or video ad

- other bugs fixed

UPDATE 4 .0 [ 05/02/2012 ]

- fixed some bugs

- changed video gallery and video player DOM structure

- added a new buffering bar

- added Vimeo support

- added audio support

- added image support

- added embed button

- added share button

- added real fullscreen for Chrome, Safari, Firefox

UPDATE 3 .0 [ 02/23/2012 ]

- fixed some bugs

- restructured documentation

- changed video gallery and video player DOM structure

UPDATE 2 .0 [ 07/09/2011 ]

- fixed some bugs

- iPod/iPad/iPhone supports

- updated to the latest html5 standards

Features

- focus on the video – the fullscreen button let’s you enjoy the video on the whole browser window

- html5 powered - html5 video element & javascript localStorage makes this a cutting edge gallery

- remembers your preferences – this player uses Html5’s LocalStorage in order to store the last volume you have set, so when you close the page and open it later, the volume is right back where you left it

- compatible with all major browsers, including IE – provides flash fallback for the browsers that don’t support the video tag ( you can specify which video to play through FlashVars ) the flash video player has the same skin as the default one so it looks the same on all platforms

- iphone / ipad compatible – this gallery has been optimized apple touch devices

- css powered skins – the gallery css is divided into two parts – functional and estethic so it’s very easy to make your own skin
Assets
Video from – http://www.bigbuckbunny.org/
FAQ
how do I embed vimeo links into it?
just add this markup inside the videogallery-con

<div class="vplayer-tobe" data-videoTitle='Vimeo video' data-type="vimeo" data-src="http://codecanyon.net/item/html5-blue-video-gallery/31539657"><div class="menuDescription"><img src="http://dummyimage.com/50x50/000000/fff&text=thumb" class="imgblock"/><div class="the-title">This is an Vimeo video</div>The thumbnail can autogenerate..</div></div>

Change the data-src value with the id of your vimeo video

How do I make my video properly encoded to use within this gallery ?
You need your movie converted to 2 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

Video DOM structure

<div class="vplayer" data-description="My Video" data-img="img/1.jpg">
<video controls preload>
<source src="http://codecanyon.net/item/html5-blue-video-gallery/video/myvideo.m4v"/>
<source src="http://codecanyon.net/item/html5-blue-video-gallery/video/myvideo.ogg"/>
<object type="application/x-shockwave-flash" data="http://codecanyon.net/item/html5-blue-video-gallery/preview.swf" width="550" height="300" id="flashcontent" style="visibility: visible;">
<param name="movie" value="http://codecanyon.net/item/html5-blue-video-gallery/preview.swf"><param name="menu" value="http://codecanyon.net/item/html5-blue-video-gallery/false"><param name="allowScriptAccess" value="http://codecanyon.net/item/html5-blue-video-gallery/always">
<param name="scale" value="http://codecanyon.net/item/html5-blue-video-gallery/noscale"><param name="allowFullScreen" value="http://codecanyon.net/item/html5-blue-video-gallery/true"><param name="wmode" value="http://codecanyon.net/item/html5-blue-video-gallery/opaque">
<param name="flashvars" value="http://codecanyon.net/item/html5-blue-video-gallery/video=video/myvideo.m4v">
</object>
</video>
</div>

I have my video ready, how do I add it whitin the gallery ?
Best way to learn that if you are not consistent with html is by example. Open source/index.html and around line 122 you will see.

[ . ]

<div class=”vplayer” data-description=”<img src=http://codecanyon.net/item/html5-blue-video-gallery/’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>

<video controls preload>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/bubbles.m4v”/>

<object width=”500” height=”300”>

<param name=”movie” value=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv”></param>

<param name=”allowFullScreen” value=http://codecanyon.net/item/html5-blue-video-gallery/”true”></param>

<param name=”allowscriptaccess” value=http://codecanyon.net/item/html5-blue-video-gallery/”always”></param>

<param name=”wmode” value=http://codecanyon.net/item/html5-blue-video-gallery/”opaque”></param>

<embed src=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv” type=”application/x-shockwave-flash” width=”500” height=”300” allowscriptaccess=”always” allowfullscreen=”true” wmode=”opaque”>

</embed>

</object>

</video>

</div>

</div><! -END VIDEO GALLERY ->

This represents the last video in the gallery, and it’s a good example so let’s clone that and name it Video 6 instead of Video 5

[ . ]

<div class=”vplayer” data-description=”<img src=http://codecanyon.net/item/html5-blue-video-gallery/’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>

<video controls preload>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/bubbles.m4v”/>

<object width=”500” height=”300”>

<param name=”movie” value=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv”></param>

<param name=”allowFullScreen” value=http://codecanyon.net/item/html5-blue-video-gallery/”true”></param>

<param name=”allowscriptaccess” value=http://codecanyon.net/item/html5-blue-video-gallery/”always”></param>

<param name=”wmode” value=http://codecanyon.net/item/html5-blue-video-gallery/”opaque”></param>

<embed src=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv” type=”application/x-shockwave-flash” width=”500” height=”300” allowscriptaccess=”always” allowfullscreen=”true” wmode=”opaque”>

</embed>

</object>

</video>

</div>

<div class=”vplayer” data-description=”<img src=http://codecanyon.net/item/html5-blue-video-gallery/’img/thumb.png’ class=’imgblock’/> Video 6 ” data-img=”img/1.jpg”>

<video controls preload>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>

<source src=http://codecanyon.net/item/html5-blue-video-gallery/”video/bubbles.m4v”/>

<object width=”500” height=”300”>

<param name=”movie” value=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv”></param>

<param name=”allowFullScreen” value=http://codecanyon.net/item/html5-blue-video-gallery/”true”></param>

<param name=”allowscriptaccess” value=http://codecanyon.net/item/html5-blue-video-gallery/”always”></param>

<param name=”wmode” value=http://codecanyon.net/item/html5-blue-video-gallery/”opaque”></param>

<embed src=http://codecanyon.net/item/html5-blue-video-gallery/”preview.swf?video=video/advideo.flv” type=”application/x-shockwave-flash” width=”500” height=”300” allowscriptaccess=”always” allowfullscreen=”true” wmode=”opaque”>

</embed>

</object>

</video>

</div>

</div><! -END VIDEO GALLERY ->

FIY, this gallery is created by the author of the best-selling, most-featured stock gallery on the internet which receives constant updates (more then 10 so far)

WordPress Gravity Gallery DZS; DZS WordPress Testimonial Rotator; DZS jQuery Mini Events Calendar; DZS Testimonial Rotator - jQuery powered; WordPress Timeline Slider; DZS Scroller - WordPress Scrollbar Plugin; Video Gallery - with Admin Panel.

Keywords: description, flash, flash fallback, flashvars, fullscren, gallery, graphics, html5, ie, images, info, localstorage, video, volume, xml.



Tags: Flash, Gallery, Video, Images, Volume, Localstorage

Premium CodeCanyon HTML5 Blue Video Gallery 122632 WordPress Themes, Website Templates, Mobile Themes, Flash Templates & Scripts from creative professional designers. Full details of CodeCanyon HTML5 Blue Video Gallery 122632 for digital design and education. CodeCanyon HTML5 Blue Video Gallery 122632 desigen style information or anything related.

Comments:

Name:*
E-Mail:*
Add Comments:
Enter Code: *