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.

  • 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.

  • 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.)

  • Cara

    I think a good strategy makes you feel happy and strong against webpage sync thats why many people use this strategy. we also use webpage snyc on our many websites (Legal steroids UK ) that is why we are so popular in United Kingdom. Thnaks