LIVE PREVIEWBUY FOR $10

WordPress model

HTML5 Blue Video Player with Playlist / Gallery - 1

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 assist too ( audio / pictures ) , 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 while you come again. The pores and skin is setup by way of easy CSS – so it’s absolutely skin-able with primary CSS

HTML5 Blue Video Player with Playlist / Gallery - 2

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 fully hides different gadgets

UPDATE 9.05 [ 05/03/2016 ]

  • [FIX] ie11 on home windows 8.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 8.91 [ 02/22/2016 ]

  • [FIX] some bugs

UPDATE 8.82 [ 02/11/2016 ]

  • [FIX] some bugs

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

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 ]

  • fastened 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 approach to scroll the menu thumbsandarrows ( test 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 gadgets round and clear navigation
  • added new superior pores and skin for the participant – aurora
  • up to date documentation
  • different bugs fastened

UPDATE 4.10 [ 10/22/2012 ]

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

UPDATE 4.0 [ 05/02/2012 ]

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

UPDATE 3.0 [ 02/23/2012 ]

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

UPDATE 2.0 [ 07/09/2011 ]

  • fastened 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 factor & javascript localStorage makes this a innovative gallery
  • remembers your preferences – this participant makes use of Html5’s LocalStorage with the intention to retailer the final quantity you may have set, so while you shut the web page and open it later, the quantity is correct again the place you left it
  • appropriate with all main browsers, together with IE – supplies flash fallback for the browsers that don’t assist 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 appropriate – 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 individual pores and skin

    Belongings

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

    FAQ

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

    Most likely you might be testing and have hooked up the identical youtube video. You may’t have the identical youtube video in 2 locations.

    how do I embed vimeo hyperlinks into it?

    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 taking part in self hosted movies. YouTube and Vimeo are only a bonus.

    How do I get the social media icons to work?

    test the shareCode setting for the vGallery operate

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

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

    Browser assist & advisable encoding program

    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 kind="utility/x-shockwave-flash" information="preview.swf" width="550" top="300" id="flashcontent" fashion="visibility: seen;">
<param title="film" worth="preview.swf"><param title="menu" worth="false"><param title="allowScriptAccess" worth="all the time">
<param title="scale" worth="noscale"><param title="allowFullScreen" worth="true"><param title="wmode" worth="opaque">
<param title="flashvars" worth="video=video/myvideo.m4v">
</object>
</video>
</div>

     

    I’ve my video prepared, how do I add it whitin the gallery ?

    Greatest approach to study that in case you are not in step with html is by instance. Open supply/index.html and round line 122 you will note: [ .. ] <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/check.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
    <supply src=”video/check.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
    <supply src=”video/check.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
    <supply src=”video/bubbles.m4v”/>

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

    </div><!END VIDEO GALLERY>

    This represents the final video within the gallery, and it’s an excellent instance so let’s clone that and title it Video 6 as an alternative of Video 5

    [ .. ] <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/check.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
    <supply src=”video/check.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
    <supply src=”video/check.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
    <supply src=”video/bubbles.m4v”/>

    <object width=”500” top=”300”>
    <param title=”film” worth=”preview.swf?video=video/advideo.flv”></param>
    <param title=”allowFullScreen” worth=”true”></param>
    <param title=”allowscriptaccess” worth=”all the time”></param>
    <param title=”wmode” worth=”opaque”></param>
    <embed src=”preview.swf?video=video/advideo.flv” kind=”utility/x-shockwave-flash” width=”500” top=”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/check.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
    <supply src=”video/check.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
    <supply src=”video/check.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
    <supply src=”video/bubbles.m4v”/>

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

    </div><!END VIDEO GALLERY>

     

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

    HTML5 Blue Video Player with Playlist / Gallery - 3

    HTML5 Blue Video Player with Playlist / Gallery - 4
    HTML5 Blue Video Player with Playlist / Gallery - 5
    HTML5 Blue Video Player with Playlist / Gallery - 6
    HTML5 Blue Video Player with Playlist / Gallery - 7
    HTML5 Blue Video Player with Playlist / Gallery - 8


    • Source