Sync webpage elements with your video | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Wednesday, 16th November, 2011

Sync webpage elements with your video

The estimated time to read this article is less than a minute

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.


Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.