Codecanyon Full Download: HTML5 Blue Video Gallery

Intro

Need A Video Gallery that may be simple to put in, to customize, works in all browsers ( even IE8 ), is up to the newest requirements ( html5 ), has multimedia beef up too ( audio / photographs ) , can feed from video sharing providers ( youtube / vimeo ) ? Then that is the Video Gallery to showcase your videos in your web page.

The gallery works in all leading browsers setting – together with IE thru flash fall-back. Also, by means of inputting a single video within the video gallery, it turns into a video player.

This gallery makes use of the latest html5 tehniques. as an example – it uses HTML5 LocalStorage to keep in mind the remaining extent you had prior to you exit and sets again that volume while you get back. the outside is setup via easy CSS – so it’s absolutely pores and skin-ready with fundamental CSS

Updates

UPDATE 9.05 [ 05/03/2016 ]

[FIX] ie11 on windows 8.1 fullscreen event
[FIX] different small bugs

UPDATE 9.03 [ 03/15/2016 ]

[TWEAK] android fullscreen now hides controls on no contact

UPDATE 9.00 [ 03/14/2016 ]

[TWEAK] preview web page remake
[TWEAK] skin_aurora remake
[FIX] a few bugs

REPLACE 8.91 [ 02/22/2016 ]

[FIX] a few bugs

REPLACE 8.82 [ 02/11/2016 ]

[FIX] a few bugs

REPLACE 8.00 [ 09/22/2014 ]

[FIX] some bugs

UPDATE 7.50 [ 04/08/2014 ]

[TWEAK] transitions now a lot smoother
[TWEAK] preview replace

UPDATE 7.44 [ 03/26/2014 ]

[FIX] more than one bugs
[FIX] preview
[FIX] add subtitle toughen

REPLACE 6.78 [ 10/14/2013 ]

[FIX] multiple insects

UPDATE 6.10 [ 10/02/2013 ]

[fix] worm at finishing of youtube video, the audio might still play

REPLACE 5.11 10/02/2013

fastened a deadly IE9 / IE10 computer virus
up to date to paintings with jquery 1.9.1 with out migrate plugin

UPDATE FIVE.00 01/10/2013

introduced HD button for YouTube videos
added new solution to scroll the menu thumbsandarrows ( take a look at YouTube Channel demo within the preview )
added three new modes – rotator, rotator3d and wall
skins for gallery and player are actually unbiased
introduced new gallery pores and skin – nav_transparent – menu pieces round and transparent navigation
introduced new superior pores and skin for the participant – aurora
updated documentation
other insects mounted

REPLACE 4.10 10/22/2012

fastened fullscreen bugs ( works perfectly on Safari, Chrome, Firefox and future compliant browsers )
delivered advertisement give a boost to – image / youtube or video advert
different bugs fastened

REPLACE 4.0 05/02/2012

fixed some insects
modified video gallery and video player DOM construction
brought a brand new buffering bar
added Vimeo give a boost to
introduced audio beef up
delivered image strengthen
brought embed button
brought share button
brought actual fullscreen for Chrome, Safari, Firefox

REPLACE 3.0 02/23/2012

fastened some insects
restructured documentation
changed video gallery and video participant DOM structure

UPDATE 2.0 07/09/2011

fixed some insects
iPod/iPad/iPhone supports
updated to the latest html5 standards

Options

focus on the video – the fullscreen button allow’s you benefit from the video on the complete browser window

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

recalls your personal tastes – this player makes use of Html5’s LocalStorage in order to retailer the ultimate volume you have got set, so whilst you shut the page and open it later, the amount is right again the place you left it

appropriate with all prime browsers, together with IE – supplies flash fallback for the browsers that don’t toughen the video tag ( you'll specify which video to play via FlashVars ) the flash video participant has the similar pores and skin as the default one so it appears the same on all structures

iphone / ipad suitable – this gallery has been optimized apple touch units

css powered skins – the gallery css is split into two parts – useful and estethic so it’s really easy to make your individual pores and skin

Property

Video from – http://www.bigbuckbunny.org/

FAQ

1st video works advantageous but, 2d video doesn’t load at all

almost definitely you might be trying out and have attached the same youtube video. you'll’t have the same youtube video in 2 places.

how do I embed vimeo hyperlinks into it?

just upload this markup throughout the videogallery-con <div class="vplayer-tobe" data-videoTitle='Vimeo video' knowledge-sort="vimeo" knowledge-src="31539657"><div magnificence="menuDescription"><img src="http://dummyimage.com/50x50/000000/fff&textual content=thumb" elegance="imgblock"/><div magnificence="the-identify">that is an Vimeo video</div>The thumbnail can autogenerate...</div></div> Change the knowledge-src value with the identification of your vimeo video

Can this be used for videos that are NO LONGER in Vimeo or YouTube? i have a few movies hosted on a server I’d like to link to immediately. Please permit me realize asap. thx

Sure, it’s made particularly for taking part in self hosted movies. YouTube and Vimeo are just an advantage.

How do i am getting the social media icons to paintings?

take a look at the shareCode setting for the vGallery function

How do I make my video correctly encoded to use inside of this gallery ?

you need your film transformed to two formats so as to be certain the html5 video performs in all browsers

Browser strengthen & beneficial encoding application

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

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

Video DOM construction

i've my video able, how do I upload it whitin the gallery ?

Perfect technique to be told that if you're now not consistent with html is by example. Open source/index.html and round line 122 you will see:

..
<div elegance=”vplayer” knowledge-description=”<img src=’img/thumb.png’ class=’imgblock’/>Video FIVE” data-img=”img/1.jpg”>

This represents the remaining video within the gallery, and it’s a good example so permit’s clone that and name it Video 6 as opposed to Video FIVE

..
<div elegance=”vplayer” information-description=”<img src=’img/thumb.png’ class=’imgblock’/>Video FIVE” information-img=”img/1.jpg”>

<video controls preload>
<supply src=”video/test.mp4” sort=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<supply src=”video/test.webm” sort=’video/webm; codecs=”vp8, vorbis”’/>
<source src=”video/test.ogg” sort=’video/ogg; codecs=”theora, vorbis”’/>
<source src=”video/bubbles.m4v”/>

<object width=”500” peak=”300”>
<param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
<param name=”allowFullScreen” value=”true”></param>
<param identify=”allowscriptaccess” worth=”at all times”></param>
<param name=”wmode” worth=”opaque”></param>
<embed src=”preview.swf?video=video/advideo.flv” type=”application/x-shockwave-flash” width=”500” peak=”THREE HUNDRED” allowscriptaccess=”always” allowfullscreen=”true” wmode=”opaque”>
</embed>
</object>
</video>
</div>
<div class=”vplayer” knowledge-description=”<img src=’img/thumb.png’ magnificence=’imgblock’/>Video 6” knowledge-img=”img/1.jpg”>

FIY, this gallery is created by way of the author of the most productive-promoting, most-featured inventory gallery at the internet which gets constant updates (extra then 10 up to now)