Category Archives: jQuery Video Gallery

Play Twitch video with HTML5 Gallery

jQuery Gallery, jQuery Video Gallery

Product:

HTML5 Gallery

Question:

I am trying to use the HTML5Gallery and I see you have Vimeo and YouTube. I wonder how can I play Twitch video in HTML5 Gallery?

Answer:

1. In the Twitch video player page, click the Share button, copy the code from the "Embed Video" text box.

2. From the "Embed Share" text, copy the src attribute value of the iframe. It will have a format like https://player.twitch.tv/?autoplay=false&video=vXXXXXXXX

3. When adding the Twitch video the gallery, add a data attribute data-mediatype=12 to the <a> tag.

A demo code snippet is as follows:

<div style="display:none;" class="html5gallery" data-skin="gallery" data-width="480" data-height="272">
    
  <!-- Add Twitch video to Gallery -->
  <a href="https://player.twitch.tv/?autoplay=false&video=v206184868" data-mediatype=12><img src="https://html5box.com/html5gallery/images/Desert_256.jpg" alt="Twitch Video"></a>

  <!-- Add Youtube video to Gallery -->
  <a href="http://www.youtube.com/embed/YE7VzlLtp-4"><img src="http://img.youtube.com/vi/YE7VzlLtp-4/2.jpg" alt="Youtube Video"></a>

</div>

How to add a loading animation to HTML5 Gallery

jQuery Photo Gallery, jQuery Video Gallery

This tutorial is only available for HTML5 Gallery Version 5.7 and above.

To add a loading animation to HTML5 gallery, you can add an extra div with class name html5gallery-loading before the html5gallery div, for example:

<!-- the html5gallery loading div -->

<div class="html5gallery-loading" style="display:block;margin:0 auto;width:300px;height:300px;background:url('html5gallery/loading.gif') no-repeat center center;"></div> 

<!-- your existing html5gallery div -->

<div class="html5gallery" data-skin="darkness" data-width="480" data-height="272" style="display:none;">

After the gallery is loaded, it will automatically hide the loading div.

Auto play Vimeo video

jQuery Video Gallery

Question:

I have set the first clip to play automatically by adding 'autoplay=1’ within the vimeo code, and all works well in Safari, Chrome and Firefox on my mac. But on my iPad, the video overlays and transport bar don’t appear on the first video and it takes 2 clicks to pay the clip. On an iPhone, I can only see the top 2-3 millimetres of the video clip and from then on the content is hidden. Is it possible that I might have altered your code to make this happen, and are you able to find out if I have by looking at the source code?

Answer:

Video auto play is disabled on iOS and Android. It's a limit from the device. And you need to remove the manually added autoplay=1 from the Vimeo URL.

Jump to top when thumbnail is clicked

jQuery Video Gallery

Question:

Is it possible to make the page ‘jump’ back to the top (where the video container is) if a viewer has scrolled down to click thumbnail, so one click is enough anywhere in the thumbnail list, to play the video.

Answer:

You can take the following steps (only for version 3.2 and after):

1. Add the following the JavaScript to the head section, before 

<script language="JavaScript">
    function jumpToTop(data) {
    	window.scrollTo(0, 300);
    }
</script>

You can change the 300 to your desired value.

2. Add the following data tag to the div:

data-onthumbclick="jumpToTop"

You can view the updated demo page http://html5box.com/html5gallery/demo_mediacenter.php

Disable video auto play

jQuery Video Gallery

Question:

I am interested in using HTML5 Gallery on our new website (currently planned).

I have a question however.

We want the video files show the Vimeo player and not auto play when they load. Currently this seems to be set in the Javascript (via the autoplay=1 command).

If we purchase a commercial version on HTML5 Gallery are we able to change the Javascript to set the autoplay=0 instead or is there a data command to stop this? It seems that the thumbnails trigger auto play all the time.

Answer:

You can add the following data tags:

data-autoplayvideo="false"  data-playvideoonclick="false"

FLV format for video gallery

jQuery Video Gallery

Question:

I'm interested in buying the HTML5 Gallery to use on a client's site.

I'm wondering is there a way to tweak the plugin so that for videos on the site I can offer an FLV with a fallback to MP4 for users without flash (e.g. iPhone, iPad etc)? If so could you provide a quick tutorial if I were to purchase?

All videos I'm uploading are hosted on the server & need to be accessible to as many users as possible, from my client's old desktops with IE7 to a smartphone.

Answer:

You don't need the FLV format, one MP4 format is enough.

If HTML5 is not supported by the web browser or the device, the player will use Flash to play the mp4 file.

You can check here for more information: http://html5box.com/html5gallery/install.php#videoformat

Caption outside of the HTML5 Gallery

jQuery Photo Gallery, jQuery Video Gallery

Question:

I'm wanting to have the titles outside the videos/images - not over the top as they are by default. I was just trying to do this by CSS with a margin-top:-60px; but this makes the title disappear as it's then outside the .html5gallery div.

I've tried every combination of adding padding to the top of the gallery to make room for my negative margin, but no dice. Any ideas?

I don't have an example uploaded anywhere at the moment, just doing it on my localhost. Let me know if you need a demo and I will make one with all the extraneous stuff removed.

Answer:

You can view this tutorial:  http://html5box.com/html5gallery/cssstyle.php

The tutorial is placing the title to the bottom, you can change the top value to -60px !important to make it go to top.

And I think the problem is because the text colour is white, it becomes invisible if your webpage background is also white. So you probably also need to change the text colour.

<style type="text/css">
  .html5gallery-title-0 {
    top: -60px !important;
  }
  .html5gallery-title-text-0 {
    color: #333 !important;
    background-color: transparent !important;
    text-align: center !important;
    font-size: 18px !important;
  }
</style>

How to loop one video in HTML5 Gallery?

jQuery Video Gallery

Question:

I may be clutching at straws but thought I'd ask: would you know of a way that each video (mp4 and webm) can individually be configured / encoded / saved to automatically loop each time it plays -- independent of any html or xml code?

Answer:
This can not be done by encoding a video.
With HTML5 Gallery, you can do the following:

1. Add the following JavaScript code in your webpage head section, before the </head> tag:
<script type="text/javascript">// <![CDATA[
function onVideoEnd(data) {
var id = data[0];
html5GalleryObjects.objects[0].isPaused = true;
html5GalleryObjects.objects[0].slideRun(id, false, true);
}
// ]]></script>
2. In your gallery div, add the following data tag:
data-onvideoend="onVideoEnd"

The video will loop playing the current video once it starts playing. This only works on desktop, will not work on mobile.

Support FLV files in HTML5 Gallery

jQuery Video Gallery

Question:

Excellent image/video slider I found and download the free version of HTML 5 Gallery to try, I found that it's not working properly of FLV format in Google Chrome, but everything fine in IE and Firefox, is that my Google Chrome problem ?! and I have tried more than one PC, overall not working of Google Chrome, my Google Chrome version is 30.0.1599.66 and Window 7, really appreciated for your reply, TQ 🙂

Answer:

FLV is a Flash video format, and it's not HTML5 compatible. You can add the following data tag to the div to force using the Flash player:

data-html5player="false"