HTML5 Blue Video Player with Playlist / Gallery

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 function

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:

<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

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