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="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script>
    <script src="" type="text/javascript"></script<
  2. Somewhere on your page put the following code :
    <iframe id="presentation1" src="" 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;
    <script type="text/javascript">
    $(function() {
         {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"}
    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.