HTML5 Blue Video Player with Playlist / Gallery
WordPress version
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 9.36 [ 10/10/2016 ]
- [FIX] cover image click on mobiles
- [ADD] galleries in tabs examples
- [TWEAK] search now completely hides other items
- [FIX] ie11 on windows 8.1 fullscreen event
- [FIX] other small bugs
- [TWEAK] android fullscreen now hides controls on no touch
- [TWEAK] preview page remake
- [TWEAK] skin_aurora remake
- [FIX] some bugs
- [FIX] some bugs
- [FIX] some bugs
- [FIX] some bugs
UPDATE 7.50 [ 04/08/2014 ]
- [TWEAK] transitions now much smoother
- [TWEAK] preview update
UPDATE 7.44 [ 03/26/2014 ]
- [FIX] multiple bugs
- [FIX] preview
- [FIX] add subtitle support
UPDATE 6.78 [ 10/14/2013 ]
- [FIX] multiple bugs
UPDATE 6.10 [ 10/02/2013 ]
- [fix] bug at ending of youtube video, the audio would still play
- fixed a fatal IE9 / IE10 bug
- updated to work with jquery 1.9.1 without migrate plugin
- added HD button for YouTube videos
- added new way to scroll the menu thumbsandarrows ( check YouTube Channel demo in the preview )
- added three new modes – rotator, rotator3d and wall
- skins for gallery and player are now independent
- added new gallery skin – nav_transparent – menu items circular and transparent navigation
- added new awesome skin for the player – aurora
- updated documentation
- other bugs fixed
- fixed fullscreen bugs ( works perfectly on Safari, Chrome, Firefox and future compliant browsers )
- added advertisement support – image / youtube or video ad
- other bugs fixed
- 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
- 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
Assets
Video from – http://www.bigbuckbunny.org/FAQ
1st video works fine but, 2nd video doesn?t load at all
Most probably you are testing and have attached the same youtube video. You can’t have the same youtube video in 2 places.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="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
Can this be used for videos that are NOT in Vimeo or YouTube? I have some videos hosted on a server I?d like to link to directly. Please let me know asap. thx
Sure, it?s made specifically for playing self hosted videos. YouTube and Vimeo are just a bonus.How do I get the social media icons to work?
check the shareCode setting for the vGallery functionHow 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="video/myvideo.m4v"/> <source src="video/myvideo.ogg"/> <object type="application/x-shockwave-flash" data="preview.swf" width="550" height="300" id="flashcontent" style="visibility: visible;"> <param name="movie" value="preview.swf"><param name="menu" value="false"><param name="allowScriptAccess" value="always"> <param name="scale" value="noscale"><param name="allowFullScreen" value="true"><param name="wmode" value="opaque"> <param name="flashvars" value="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=’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>
<video controls preload>
<source src=”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<source src=”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>
<source src=”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>
<source src=”video/bubbles.m4v”/>
<object width=”500” height=”300”>
<param name=”movie” value=”preview.swf?video=video/advideo.flv”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<param name=”wmode” value=”opaque”></param>
<embed src=”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=’img/thumb.png’ class=’imgblock’/>Video 5” data-img=”img/1.jpg”>
<video controls preload>
<source src=”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<source src=”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>
<source src=”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>
<source src=”video/bubbles.m4v”/>
<object width=”500” height=”300”>
<param name=”movie” value=”preview.swf?video=video/advideo.flv”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<param name=”wmode” value=”opaque”></param>
<embed src=”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=’img/thumb.png’ class=’imgblock’/>Video 6” data-img=”img/1.jpg”>
<video controls preload>
<source src=”video/test.mp4” type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<source src=”video/test.webm” type=’video/webm; codecs=”vp8, vorbis”’/>
<source src=”video/test.ogg” type=’video/ogg; codecs=”theora, vorbis”’/>
<source src=”video/bubbles.m4v”/>
<object width=”500” height=”300”>
<param name=”movie” value=”preview.swf?video=video/advideo.flv”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<param name=”wmode” value=”opaque”></param>
<embed src=”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)