Last active
August 25, 2017 23:08
-
-
Save tomjnsn/4422345 to your computer and use it in GitHub Desktop.
Wire up Galleria to detect YouTube and Vimeo videos playing so it pauses the slideshow while videos are playing.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var autoplayLength = 8000; | |
var gallery = false; | |
var ytplayer = false; | |
$(function() { | |
if (window.addEventListener) { | |
window.addEventListener('message', messageReceived, false); | |
} else { | |
window.attachEvent('onmessage', messageReceived, false); | |
} | |
$('#slides').each(function() { | |
Galleria.ready(function() { | |
gallery = this; | |
// see if we need any youtube stuff | |
var count = this.getDataLength(); | |
for (var x=0; x < count; x++) { | |
var data = this.getData(x); | |
if (data.iframe && data.iframe.indexOf('//www.youtube.com/') > -1) { | |
// load up youtube js | |
var tag = document.createElement('script'); | |
tag.src = "//www.youtube.com/iframe_api"; | |
$('body').append(tag); | |
break; | |
} | |
} | |
}); | |
Galleria.on('image', function(e) { | |
if (e.imageTarget.src.indexOf('//player.vimeo.com/') > -1) { | |
// vimeo video | |
var id = e.imageTarget.id; | |
var url = e.imageTarget.src.split('?')[0]; | |
var vimeoWin = $('#' + id)[0].contentWindow; | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'pause'}), url); | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'finish'}), url); | |
vimeoWin.postMessage(JSON.stringify({method:'addEventListener', value:'playProgress'}), url); | |
} else if (e.imageTarget.src.indexOf('//www.youtube.com/') > -1) { | |
// youtube video | |
ytplayer = new YT.Player(e.imageTarget.id, { | |
events: { | |
'onStateChange': function(e) { | |
switch(e.data) { | |
case YT.PlayerState.BUFFERING: | |
case YT.PlayerState.PLAYING: | |
gallery.pause(); | |
break; | |
case YT.PlayerState.ENDED: | |
gallery.next(); | |
break; | |
case YT.PlayerState.PAUSED: | |
gallery.play(autoplayLength); | |
} | |
} | |
} | |
}); | |
} | |
}); | |
Galleria.run('#homeSlides', { | |
autoplay: autoplayLength, | |
responsive: true, | |
thumbnails: 'empty', | |
showCounter: false, | |
slideshow: true, | |
vimeo: { api: 1 }, | |
youtube: { enablejsapi: 1 } | |
}); | |
}); | |
}) | |
function messageReceived(e) { | |
var data = JSON.parse(e.data) | |
switch(data.event) { | |
case 'playProgress': | |
// need to pause player | |
gallery.pause(); | |
break; | |
case 'finish': | |
// go to next slide | |
gallery.next(); | |
break; | |
case 'pause': | |
// start the slideshow again | |
gallery.play(autoplayLength); | |
break; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Have you had any luck getting something like this working with Youtube API V3? I used to use a similar technique to play the slideshow once a video had finished, but since upgrading to Galleria 1.4.2 this no longer works - it looks like 2 iframes get loaded and neither can play.