Assets

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

FAQ

1st video works high-quality however, 2nd video doesn?t load in any respect

Most most likely you might be 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="https://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 enjoying self hosted movies. YouTube and Vimeo are only a bonus.

How do I get the social media icons to work?

test 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 be certain that the html5 video performs in all browsers

Browser assist & really useful 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 kind="application/x-shockwave-flash" information="preview.swf" width="550" peak="300" id="flashcontent" fashion="visibility: visible;">
<param identify="movie" worth="preview.swf"><param identify="menu" worth="false"><param identify="allowScriptAccess" worth="always">
<param identify="scale" worth="noscale"><param identify="allowFullScreen" worth="true"><param identify="wmode" worth="opaque">
<param identify="flashvars" worth="video=video/myvideo.m4v">
</object>
</video>
</div>

I’ve my video prepared, how do I add it whitin the gallery ?

Best strategy to study that in case you are 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”>

<video controls preload>
<supply src=”video/take a look at.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<supply src=”video/take a look at.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
<supply src=”video/take a look at.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
<supply src=”video/bubbles.m4v”/>

<object width=”500” peak=”300”>
<param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
<param identify=”allowFullScreen” worth=”true”></param>
<param identify=”allowscriptaccess” worth=”at all times”></param>
<param identify=”wmode” worth=”opaque”></param>
<embed src=”preview.swf?video=video/advideo.flv” kind=”utility/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”at all times” allowfullscreen=”true” wmode=”opaque”>
</embed>
</object>
</video>
</div>

</div><!END VIDEO GALLERY>

This represents the final video within the gallery, and it’s an excellent instance so let’s clone that and identify it Video 6 as a substitute 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>
<supply src=”video/take a look at.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<supply src=”video/take a look at.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
<supply src=”video/take a look at.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
<supply src=”video/bubbles.m4v”/>

<object width=”500” peak=”300”>
<param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
<param identify=”allowFullScreen” worth=”true”></param>
<param identify=”allowscriptaccess” worth=”at all times”></param>
<param identify=”wmode” worth=”opaque”></param>
<embed src=”preview.swf?video=video/advideo.flv” kind=”utility/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”at all times” 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>
<supply src=”video/take a look at.mp4” kind=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2”’/>
<supply src=”video/take a look at.webm” kind=’video/webm; codecs=”vp8, vorbis”’/>
<supply src=”video/take a look at.ogg” kind=’video/ogg; codecs=”theora, vorbis”’/>
<supply src=”video/bubbles.m4v”/>

<object width=”500” peak=”300”>
<param identify=”film” worth=”preview.swf?video=video/advideo.flv”></param>
<param identify=”allowFullScreen” worth=”true”></param>
<param identify=”allowscriptaccess” worth=”at all times”></param>
<param identify=”wmode” worth=”opaque”></param>
<embed src=”preview.swf?video=video/advideo.flv” kind=”utility/x-shockwave-flash” width=”500” peak=”300” allowscriptaccess=”at all times” allowfullscreen=”true” wmode=”opaque”>
</embed>
</object>
</video>
</div>

</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 to this point)