HTML5 Blue Video Gallery

Assets

FAQ

how do I embed vimeo links into it?

<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

How 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)