Yes, you can add the following script at the bottom of your page, just before the body's closing tag </body>:
<script type="text/javascript">
function setPlayVideoClickEventForThumbs() {
//1. helper functions
var addEvent = function (el, eventName, eventHandler) {
if (el.addEventListener)
el.addEventListener(eventName, eventHandler, false);
else if (el.attachEvent) //IE
el.attachEvent('on' + eventName, eventHandler);
}
var getChildren = function (node) {
var ns0 = node.childNodes;
var ns1 = [];
if (ns0) {
for (var i = 0, len = ns0.length; i < len; i++) {
if (ns0[i].nodeType == 1) ns1.push(ns0[i]);
}
}
return ns1;
};
var playVideo = function (thumb) {
for (var i = 0; i < links.length; i++) {
if (links[i] != null) {
if (parseInt(thumb.getAttribute("rel")) == i)
links[i].setAttribute("autoPlayVideo", "true");
else
links[i].setAttribute("autoPlayVideo", "false");
}
}
};
//2. set links
var links = [];
var slides = getChildren(document.getElementById("slider"));
for (var i = 0; i < slides.length; i++) {
if (slides[i].className.indexOf("video") != -1) {
links.push(slides[i]);
}
else links.push(null);
}
//3. set thumbnail click event
var divs = document.getElementById("thumbs").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
if (divs[i].className == "thumb") {
divs[i].setAttribute("rel", i);
addEvent(divs[i], "click", function () { playVideo(this); });
}
}
//4. return links
return links;
}
function afterSlideChange(args) {
//args: [0]-currentSlide index, [1]-currentImage
for (var i = 0; i < videoSlides.length; i++) {
if (videoSlides[i] != null) {
videoSlides[i].setAttribute("autoPlayVideo", "false");
}
}
}
var videoSlides = setPlayVideoClickEventForThumbs();
</script>
How to test it?
1. add five thumbnails to the downloaded demo6.html page (just below the sliderFrame):
<!--thumbnails-->
<div id="thumbs">
<div class="thumb"><img src="images/thumb1.jpg" /></div>
<div class="thumb"><img src="images/thumb2.jpg" /></div>
<div class="thumb"><img src="images/thumb3.jpg" /></div>
<div class="thumb"><img src="images/thumb4.jpg" /></div>
<div class="thumb"><img src="images/thumb5.jpg" /></div>
</div>
2. add the script to the bottom of the page, just as I mentioned at the beginning of this post.
3. Click thumbnails to watch the videos.
Note: This solution will enable the autoPlayVideo by clicking the related thumnail,
but it will also disable the autoPlayVideo via the slider's auto sliding, even if you have
set the slide to autoPlayVideo="true"