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/ee1fe2c005627d3839f1a26f6e473a04 to your computer and use it in GitHub Desktop.
Save skynet/ee1fe2c005627d3839f1a26f6e473a04 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