Syncing page content with HTML5 video (a different kind of webinar)

If you’ve been around the software industry for a little while, you’ve probably attended at least a few “webinars”, where someone does an online presentation, which you can watch and listen to in real time. You might be able to ask questions via a chat window, and if you’re lucky, the presenter will select your question to answer in the very limited time allocated for audience questions. If you can’t make it to the real-time presentation, you can watch a recording later, but you miss out on the Q&A.

The Mozilla Developer Engagement team is experimenting with a slightly different approach to presenting webinars. We’re decoupling the presentation part from the Q&A part. Instead of a real-time presentation with a little bit of Q&A, we’re publishing a screencast, and scheduling time for online chat about it later.

You can view the screencast on your own time, as much as you need to, and peruse and play with the code under discussion. Then, for those who have questions, the presenter will be on IRC during scheduled times to discuss them. You’ll also be able to chat with other participants, which usually isn’t possible in a typical webinar.

Here is the first in an intended series of pseudo-webinars: Christian Heilmann talking about syncing page content with HTML5 video.

The screencast

The chats

Discussion of this screencast will take place in the #mdnlearning channel on at the following times:

  • 10:00 UTC, Monday, 21 March
  • 19:00 UTC, Monday, 21 March

If you don’t have an IRC client installed (such as the Chatzilla add-on for Firefox), you can access the #mdnlearning channel via this Mibbit widget.

We picked the times for the chat sessions to cover as many time zones as possible. We know they won’t be ideal for everybody. Please let us know in the comments how much lead time you’d like between publishing screencasts and the scheduled chats.

The code

The code that Chris demos in the screencast is available at

About Chris Heilmann

Evangelist for HTML5 and open web. Let's fix this!

More articles by Chris Heilmann…


  1. sometwothings

    This is GREAT!! One suggestion: think about possibilities popcorn.js could offer you for your screencasts. How about a code area on the page with changes following all the code entered in the screencast live! With the option for the user to play around with it while the video is still running (maybe using skywriter or something?). And a feed or something showing relevant MDN articles or maybe some demo sites showing off the new features used in the video. Or maybe….

    March 8th, 2011 at 15:26

  2. Axel Hecht

    I was a tad confused that

    if(now > old){

    actually works for scrolling back in time, but looking again, it just means that updating the page may take up to two seconds then? up to 1 sec to set now, and another sec to increment?

    March 8th, 2011 at 16:46

  3. koko1215

    amazing!!! love the this blog it help me so much, even though i had i little bit confused with the words that are very technical to me…

    March 9th, 2011 at 01:23

  4. Katja

    Absolutely great tutorial! Thanks very much for sharing. It would be really nice to actually make this tutorial about video element in the native video, with indeed the code available for the viewer, as sometwothings pointed out. It’s hardly readable in the movie now.

    March 9th, 2011 at 03:12

  5. kazé

    Looks like a perfect use case for HTML Timing:

    Do you mind if I use your demo and rewrite it with HTML Timing? I believe that would be an easy and extensible way to address such needs, and I’d be happy to demo it if you allow me to publish it on my website.


    March 9th, 2011 at 04:15

    1. Janet Swisher

      The code is available on github (see the bottom of the post), so you can fork it and change as you like. Please share what you come up with!

      March 9th, 2011 at 10:43

      1. kazé

        Will do, thanks!

        March 9th, 2011 at 10:44

  6. Pippa Buchanan

    Great screencast Chris!

    I’ve recommended it to the admins of the Interactive Open Video with Popcorn study group over at the School of Webcraft and have suggested that one of their learning tasks be that they follow along.

    May 2nd, 2011 at 09:40

Comments are closed for this article.