Important!
This gallery requires 2-3 formats in order to work proper in all browsers. And as such you will need a converter (see below a recommendation ). HTML5 video is not a finished standard. Browser vendors always change their mind about which format they support and how. As such, this can only be an experimental solution for html5 video gallery.For a stable solution look into this > http://codecanyon.net/item/video-gallery-with-admin-panel/694876 < it’s still html5 enabled ( in order to display on the iphone and ipad ) works in all browsers and requires your videos in only one format
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
Intro
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. All the player graphics are driven by XML so you can change anything very easy.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.
Updates
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
How do I make my video properly encoded to use whitin 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
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)
( 22 ratings )
Request processing...