Sync webpage elements with your video

So I came across an interesting tutorial today that allows you to sync web page elements with video.

Basically it triggers certain actions (like load content into the page) when certain points in the video are reached. Its hard to explain so check out the demo.

This is all possible using a JS include produced by Mozilla called Popcorn.

I can imagine all kinds of possibilities for this. Just some that spring to mind include:

  • Add subtitles to video.
  • Make a call to action appear when a video finishes.
  • Provide a guided tour of a website with different screen elements being highlighted in time with the video.
  • Show users content giving additional information to that covered in the video.

The list could easily go on. Check it out and let me know what applications you can think of in the comments below.

  • http://twitter.com/deliasc Dave Campos

    This is a awesome start for the elearning community to stop being dependent on flash.  It is just really simple do do all that with flash, this is not on my priority list to figure out.

  • http://twitter.com/abosio Anthony Bosio

    We were able to do things like with with SMIL on RealPlayer but it never really took off. (And that was before RealPlayer installed crapware and when it was the standard for streaming content.)

Headscape

Boagworld