Skip to content

Instantly share code, notes, and snippets.

@skynet
Forked from tomjnsn/galleria-video-pause.js
Created August 25, 2017 23:08
Show Gist options
  • Save skynet/3e0af77bca07255f9b30fa4c6794aaec to your computer and use it in GitHub Desktop.
Save skynet/3e0af77bca07255f9b30fa4c6794aaec 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.
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