HTML5 Blue Video Player With Playlist / Gallery

HTML5 Blue Video Player with Playlist / Gallery

WordPress model

Intro

Want a Video Gallery that’s simple 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 / photographs ) , 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 via flash fall-back. Also, 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 once you come again. The pores and skin is setup by way of easy CSS – so it’s absolutely 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 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 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 ]

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 option to scroll the menu thumbsandarrows ( examine 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 fastened

UPDATE 4.10 [ 10/22/2012 ]

fastened fullscreen bugs ( works completely on Safari, Chrome, Firefox and future compliant browsers )
added commercial help – 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 help
added audio help
added picture help
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

Features

deal with the video – the fullscreen button let’s you benefit from the video on the entire browser window

html5 powered – html5 video aspect & javascript localStorage makes this a innovative gallery

remembers your preferences – this participant makes use of Html5’s LocalStorage with a view to retailer the final quantity you’ve set, so once 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 – gives flash fallback for the browsers that don’t help the video tag ( you may specify which video to play via 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 components – practical and estethic so it’s very simple to make your individual pores and skin

Assets

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

FAQ

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

Most most likely you’re testing and have connected the identical youtube video. You can’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&text=thumb" class="imgblock"/><div class="the-title">This 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 instantly. Please let me know asap. thx

Sure, it?s made particularly for taking part in self hosted movies. YouTube and Vimeo are only a bonus.

examine 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 a view to ensure the html5 video performs in all browsers

Browser help & beneficial 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 sort="utility/x-shockwave-flash" information="preview.swf" width="550" peak="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 ?

Best option to study that if you’re not constant 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”>

</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”>

</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 up to now)

LIVE PREVIEW BUY FOR $10