Drupal Views Slideshow: How to pause slideshow on play of vimeo embedded videos
Issue: The Drupal views slideshow module doesn’t pause slideshow on playing an embedded vimeo video.
Solution:
Capture the Play, Pause and finish events of the vimeo video using the Javascript library then execute action on drupal slideshow to pause and play as per your requirement.
The Vimeo Javascript library understanding is required.
Steps to be followed:
If you are embedding vimeo video like this: <iframe src="//player.vimeo.com/video/VIDEO_ID" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> It must be changed to: <iframe id="vimeo_player" src="//player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer" width="WIDTH" height="HEIGHT" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> Note the differences(marked in bold) carefully and make changes to the existing embedded vimeo iframe. This is required to access the video api exposed by vimeo.
The second step is to download the vimeo JavaScript library for using the API from here or here which is known as froogaloop.
Create a new JS injector and copy paste the froogaloop in the page and select it to be in the header section. Also give the pages you need this to appear in.
Create an other slideshow page specific new JS injector in which you want to make changes. Also note that this Javascript should come after the library in the page.
Use this sample code in the slideshow JS injector:
jQuery(document).ready(function() { // modify the jquery selector to select the video iframe // only!! jQuery('iframe').each(function(){ Froogaloop(this).addEvent('ready', ready); }); function ready(playerID){ // Add event listerns // http://developer.vimeo.com/player/js-api#events Froogaloop(playerID).addEvent('play', play); Froogaloop(playerID).addEvent('pause', pause); Froogaloop(playerID).addEvent('finish', finish); // Fire an API method // http://developer.vimeo.com/player/js-api#methods } //Function called when the video is started function play(){ //Main step: this is the code to pause the slideshow. Find //the slideshowID of the slideshow in your page. It will be //the same as this. //"force":1 is required else on hover or mouse click command //settings given by slideshow module can change change the //events to play or pause back again. Which should not be //allowed clearly. Drupal.viewsSlideshow.action({ "action": 'pause', "force" :1,"slideshowID": "slideshow-block"}); console.log("playing!!!"); } //Function called when the video is paused function pause() { //Action to start the slideshow on video pause. Drupal.viewsSlideshow.action({ "action": 'play', "force" :1,"slideshowID": "slideshow-block"}); console.log("paused"); } //Function called when the video is finished function finish(){ //Action to start the slideshow back again Drupal.viewsSlideshow.action({ "action": 'play', "force":1 ,"slideshowID": "slideshow-block"}); console.log("finished"); } });
The comments in the code are descriptive and highlight the important parts to call the slideshow functions. Understand the vimeo API to tweak and accomplish more.
Similar approach needs to be followed to get such functionality when embedding youtube videos or any other service embedded videos.