dseif / slide-drive

Slideshow using audio/video to drive content
45 stars 9 forks source link

Allow media to be embedded in slides, synchronized #67

Open banksJeremy opened 12 years ago

banksJeremy commented 12 years ago

Greg suggested the ability to embed audio and video in slides.

It seems like it would be great if we could do this, while keeping those element's playback synchronized with the presentation overall. We could hide/disable the controls on the individual media elements, and just let them be controlled through the main controls (playback as well as muting).

There doesn't seem to be a built-in way to synchronize multiple Players, but it probably won't be too horrible.

Attaching sub-slides/animations to a per-slide synchronized BasePlayer might be a clean way to integrate that, too.

banksJeremy commented 12 years ago

Something like...

function sync( master, slave, offset ) {
  slave.controls(false);
  slave.currentTime( master.currentTime() - offset );

  if ( master.paused() ) {
    slave.pause();
  } else {
    slave.play();
  }

  master.on( "seeking", function() { slave.pause(); } );
  master.on( "seeked", function() {
    slave.currentTime( master.currentTime() - offset );
    // or the new time is outside of slave's time, pause it
  });

  // playing, pause, volumechange
}

And then, for each slide:

if ( slide.media ) {
  sync( popcorn, slide.media, slide.start );
}

edit: actually, trying to make something entirely general may be unwise. Don't register handlers for every slide, just have one set of handlers and use deck.change to stay aware of what synced media is active.