In the lab we’ve sometimes had to show videos at open-house like events for the department or when visitors come. I’d implemented a slideshow using reveal.js and froogaloop in the past but the code was lost to time. I figured that this time I would document it for future use.

For completeness a working example is here

Beyond the Reveal.js and Froogaloop documentations this page has a useful example.

### Specifications:

• Start when user hits the right/left arrow or the play button is clicked on the first video
• Pause the current video if the next/previous slide is pressed before the current video ends
• Specify videos in a list that can easily be added/removed from

We will be using the froogaloop 2 javascript library

Create an empty slide div that will be filled in dynamically

Loop over all of the videos in the list and add the associated vimeo iframe for that video. Specify the size of the iframe/vimeo video here.

Initialize Reveal.js, this is where we can specify the size of the slide, and other parameters. See the [Reveal.js documentation](https://github.com/hakimel/reveal.js) for more info


Setup the froogaloop API so that the slide will go to the right when the video finishes playing

Once a slide is changed, get the vimeo iframe for the new slide, play the video on that slide

Reveal.js allows for custom keyboard functions, if the slide is changed by the user before the current video finishes, pause the video and change the slide.