Vimeo-slides-sync

Synchronize your slides with your video on your web page

Steps to go

  1. Shoot and upload your video presentation on Vimeo
  2. Share your slides regular images on a web server
  3. Synchronize all things on your web page
Enjoy, it's free

How to use-it ?

  1. On the <head> section of the page put the following JavaScript import libraries 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js" type="text/javascript"></script>
<script src="http://s3-eu-west-1.amazonaws.com/xebia-video/vimeo-slides-sync-1.0.0.min.js" type="text/javascript"></script<
  2. Somewhere on your page put the following code : 
    <iframe id="presentation1" src="http://player.vimeo.com/video/35533358?api=1&player_id=presentation1&title=0&byline=0&portrait=0&color=ffffff" width="460" height="261" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<div id="presentation1-slides"></div>
<style type="text/css">
#presentation1-slides > img {
    width: 460px;
    height: 262px;
}
</style>
<script type="text/javascript">
$(function() {
  $("#presentation1").vimeoSlidesSync([
     {src:   "mire.jpg", timing:    "0:00"},
     {src: "slide1.jpg", timing: "0:00:04"},
     {src: "slide2.jpg", timing:    "0:08"},
     {src: "slide4.jpg", timing:    "0:13"},
     {src: "slide3.jpg", timing:    "0:11"},
     {src: "slide5.jpg", timing:    "0:16"}
  ]);
});
</script>
    presentation1 is provided as an example of unique identifier of your video, slides and sync datas. You can (should) replace all occurences with an identifier of your own.