Home / Premium Pro Plugins / HTML5 Blue Video Gallery

HTML5 Blue Video Gallery

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...



DOWNLOAD


Intro

Desire a Video Gallery that’s straightforward to put in, to customise, works in all browsers ( even IE8 ), is as much as the most recent requirements ( html5 ), has multimedia help too ( audio / photos ) , can feed from video sharing suppliers ( youtube / vimeo ) ? Then that is the Video Gallery to showcase your movies in your web site.

The gallery works in all main browsers atmosphere – together with IE by way of flash fall-back. Additionally, by inputting a single video within the video gallery, it turns into a video participant.

This gallery makes use of the most recent html5 tehniques. For instance – it makes use of HTML5 LocalStorage to recollect the final quantity you had earlier than you exit and units again that quantity whenever you come again. The pores and skin is setup through easy CSS – so it’s totally skin-able with fundamental CSS

Updates

UPDATE 9.36 [ 10/10/2016 ]

  • [FIX] cowl picture click on on mobiles
  • [ADD] galleries in tabs examples

UPDATE 9.23 [ 09/19/2016 ]

  • [TWEAK] search now utterly hides different objects

UPDATE 9.05 [ 05/03/2016 ]

  • [FIX] ie11 on home windows eight.1 fullscreen occasion
  • [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] some bugs

UPDATE eight.91 [ 02/22/2016 ]

  • [FIX] some bugs

UPDATE eight.82 [ 02/11/2016 ]

  • [FIX] some bugs

UPDATE eight.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] a number of bugs
  • [FIX] preview
  • [FIX] add subtitle help

UPDATE 6.78 [ 10/14/2013 ]

  • [FIX] a number of bugs

UPDATE 6.10 [ 10/02/2013 ]

  • [fix] bug at ending of youtube video, the audio would nonetheless play

UPDATE 5.11 [ 10/02/2013 ]

  • mounted a deadly IE9 / IE10 bug
  • up to date to work with jquery 1.9.1 with out migrate plugin

UPDATE 5.00 [ 01/10/2013 ]

  • added HD button for YouTube movies
  • added new method to scroll the menu thumbsandarrows ( verify YouTube Channel demo within the preview )
  • added three new modes – rotator, rotator3d and wall
  • skins for gallery and participant are actually unbiased
  • added new gallery pores and skin – nav_transparent – menu objects round and clear navigation
  • added new superior pores and skin for the participant – aurora
  • up to date documentation
  • different bugs mounted

UPDATE four.10 [ 10/22/2012 ]

  • mounted fullscreen bugs ( works completely on Safari, Chrome, Firefox and future compliant browsers )
  • added commercial help – picture / youtube or video advert
  • different bugs mounted

UPDATE four.zero [ 05/02/2012 ]

  • mounted some bugs
  • modified video gallery and video participant DOM construction
  • added a brand new buffering bar
  • added Vimeo help
  • added audio help
  • added picture help
  • added embed button
  • added share button
  • added actual fullscreen for Chrome, Safari, Firefox

UPDATE three.zero [ 02/23/2012 ]

  • mounted some bugs
  • restructured documentation
  • modified video gallery and video participant DOM construction

UPDATE 2.zero [ 07/09/2011 ]

  • mounted some bugs
  • iPod/iPad/iPhone helps
  • up to date to the most recent html5 requirements

Options

  • deal with the video – the fullscreen button let’s you benefit from the video on the entire browser window
  • html5 powered – html5 video ingredient & javascript localStorage makes this a leading edge gallery
  • remembers your preferences – this participant makes use of Html5’s LocalStorage with a purpose to retailer the final quantity you’ve gotten set, so whenever you shut the web page and open it later, the quantity is correct again the place you left it
  • suitable with all main browsers, together with IE – offers flash fallback for the browsers that don’t help the video tag ( you possibly can specify which video to play by way of FlashVars ) the flash video participant has the identical pores and skin because the default one so it seems to be the identical on all platforms
  • iphone / ipad suitable – this gallery has been optimized apple contact gadgets
  • css powered skins – the gallery css is split into two elements – purposeful and estethic so it’s very straightforward to make your personal pores and skin

    Property

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

    FAQ

    1st video works wonderful however, 2nd video doesn?t load in any respect

    Most likely you’re testing and have hooked up the identical youtube video. You’ll be able to’t have the identical youtube video in 2 locations.

    simply add this markup contained in the videogallery-con

    <div class="vplayer-tobe" data-videoTitle='Vimeo video' data-type="vimeo" data-src="31539657"><div class="menuDescription"><img src="http://dummyimage.com/50x50/000000/fff&textual content=thumb" class="imgblock"/><div class="the-title">That is an Vimeo video</div>The thumbnail can autogenerate...</div></div>
    

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

    Can this be used for movies which might be NOT in Vimeo or YouTube? I’ve some movies hosted on a server I?d wish to hyperlink to straight. Please let me know asap. thx

    Positive, it?s made particularly for enjoying self hosted movies. YouTube and Vimeo are only a bonus.

    How do I get the social media icons to work?

    verify the shareCode setting for the vGallery operate

    You want your film transformed to 2 codecs with a purpose to ensure the html5 video performs in all browsers

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

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

    Video DOM construction

    <div class="vplayer" data-description="My Video" data-img="img/1.jpg">
    
    <video controls preload>
    <supply src="video/myvideo.m4v"/>
    <supply src="video/myvideo.ogg"/>
    
    <object sort="software/x-shockwave-flash" information="preview.swf" width="550" peak="300" id="flashcontent" type="visibility: seen;">
    <param identify="film" worth="preview.swf"><param identify="menu" worth="false"><param identify="allowScriptAccess" worth="all the time">
    <param identify="scale" worth="noscale"><param identify="allowFullScreen" worth="true"><param identify="wmode" worth="opaque">
    <param identify="flashvars" worth="video=video/myvideo.m4v">
    </object>
    </video>
    </div>
    

     

    Greatest method to be taught that in case you are not according to html is by instance. Open supply/index.html and round line 122 you will notice:

    [ .. ] <div class=”vplayer” data-description=”<img src=’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>

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

    <object width=”500” peak=”300”>
    <param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
    <param identify=”allowFullScreen” worth=”true”></param>
    <param identify=”allowscriptaccess” worth=”all the time”></param>
    <param identify=”wmode” worth=”opaque”></param>
    <embed src=”preview.swf?video=video/advideo.flv” sort=”software/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”all the time” allowfullscreen=”true” wmode=”opaque”>
    </embed>
    </object>
    </video>
    </div>

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

    [ .. ] <div class=”vplayer” data-description=”<img src=’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>

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

    <object width=”500” peak=”300”>
    <param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
    <param identify=”allowFullScreen” worth=”true”></param>
    <param identify=”allowscriptaccess” worth=”all the time”></param>
    <param identify=”wmode” worth=”opaque”></param>
    <embed src=”preview.swf?video=video/advideo.flv” sort=”software/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”all the time” allowfullscreen=”true” wmode=”opaque”>
    </embed>
    </object>
    </video>
    </div>
    <div class=”vplayer” data-description=”<img src=’img/thumb.png’ class=’imgblock’/>Video 6” data-img=”img/1.jpg”>

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

    <object width=”500” peak=”300”>
    <param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
    <param identify=”allowFullScreen” worth=”true”></param>
    <param identify=”allowscriptaccess” worth=”all the time”></param>
    <param identify=”wmode” worth=”opaque”></param>
    <embed src=”preview.swf?video=video/advideo.flv” sort=”software/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”all the time” allowfullscreen=”true” wmode=”opaque”>
    </embed>
    </object>
    </video>
    </div>

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

     

    FIY, this gallery is created by the creator of the best-selling, most-featured inventory gallery on the web which receives fixed updates (extra then 10 to date)






  • DOWNLOAD

    Check Also

    mbpr_large.png

    Gamba Facebook Friends and Groups Autoposter v1.4

    DOWNLOAD Vital: Please, verify all of the obtainable options, supported networks and feed choices earlier ...

    king590x300two.png

    KingMEDIA – DarkBlue Theme

    DOWNLOAD This theme is for King Media Script – This theme are darkish, blue and ...