Sync webpage elements with your video

Paul Boag

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.