As noted in the Creating CSS3 Snowflakes article, for our recent holiday card project we wanted to create an experience with the website that was closely tied to our centerpiece video. One of the keys to this was making the experience seem as seamless as possible to allow the viewer to immerse themselves in the video. We also wanted to see if we could connect events in the video to events on the web page to further enhance the experience.
Examples of Syncing Events
To get an idea of what I mean by "syncing web page events with an embedded YouTube video" it might be good to check out two examples. The first example is very simple and it's the one I created as a proof of concept for our holiday card project. The example page explains what you should see. The second example is the holiday card itself. The holiday card example will only work on Safari, Chrome and Firefox because of the CSS3 animations we used.
The main thing we did with the holiday card project to make the experience seem seamless was to hide the text and other traditional page "chrome" when the video started playing. We did this with a simple opacity transition and then moved those elements far off the screen. Once these elements are removed the viewer is left with the video playing and the background. The background, an overview of our campus, is not a static though. The main character in the holiday card video was a sprite visiting and bringing holiday magic to various locations around campus. As the sprite visits places like our freshman dorms or our football stadium the location of the sprite is highlighted on the page background with those same locations changing color. It's a subtle effect because we didn't want to distract too much from the video itself. My favorite part is the sprite rising into the air from downtown Morgantown (only viewable in Safari & Chrome because of a specific type of CSS3 animation).
So how did we do it?
onStateChange & YouTubePlayer
Using YouTubePlayer to listen to these
onStateChange events is actually quite straightforward. As with any video the first thing you'll want to do is embed it. All you need to know is the ID of the
Once that's done you can set-up event listeners that do something when the event you want to track is fired. For example, let's listen for when a viewer starts playing a video and then listen for when the video ends. It's important to note that ‘playing‘ is fired after a user pauses and then restarts a video. There's no differentiation between starting a video for the first time and after pausing the video.
Timed Events with YouTubePlayer
I added the
.at() alias and expanded the
.on() functionality for YouTubePlayer to make it really easy to add timed events. Using the fireworks as a quick example:
.at() function registers events with the browser with a certain name based on the time the event should take place (e.g. 1100). These events are then fired by a
setInterval() function that tracks time once the viewer starts watching the video. Every time the tracked time is incremented (e.g. from 1000ms to 1100ms) a corresponding event is fired (e.g. 1100). Thanks to
onStateChange, if the video is paused or buffering the tracked time isn't incremented and no event is fired. If a video is scrubbed the tracked time is updated appropriately and incremented again.
A Warning About Timed Events
There is one very important thing to keep in mind when working with timed events. Because the tracked video time is sort of faked by using the
I always find it difficult to explain something like this without saying "Just look at the code." Hopefully you were able to get a reasonable idea of how easy it is to use timed events to sync web page content with your embedded YouTube videos. I think there are a lot of opportunities to create richer experiences for viewers with this technique.