How to Make Html5 Animations Sync to an Embedded Video

Hi, this is Andy from Adobe. Today I'll show you a handy way to animate the contents of a web page so that it stays synchronized with an embedded video. First let's see what it looks like. So I have a sample project here, which I will preview. And it's a simple page with an embedded video This video is from my colleague Michael Chaize And as you can see once the video plays, I've dropped in some animations. The point is to have the animations not compete with the video, but complement what's going on in the foreground. You can pause, you can jump back and forth, you can scrub, and the video keeps in time with the animations. And at the end, when I want people to focus on the video you can blank out page in the background. It's a cool effect. So let's take a look at how it's done. Now I'm building my animations in Edge Animate, because I think it's the best tool for DOM animations. I'll just make my document 100% and give myself some room to work here. There are basically three things that we need to do. First I need an animation for the web page, second I need to embed my video into that animation, and third I need some script to synchronize them so they keep time. Now first I'll lay out my animation. And this is going to be pretty simple. I will make a holder for my video, and I'll use the same video so I'll check the size.. I'll do 560x315, but it can be anything. Oops, it's linked. I'll unlink that. Okay, that'll be where the video will go, a little bit later. Now I want a placeholder animation, for the sake of time. So I'll just make a ball and animate it across the screen. And in this case I'm going to make an animation on the root timeline, of the same length as the video, and just keep them directly in time. We could do more complicated things but that will do for now. So the video is 1:20. I'll zoom out my timeline here so I can see that far. And now I'll make a pinned animation. I'll turn on pinning, and drag out the yellow half of the pin to 1:20 And now I just drag my things to where I want them to wind up. So I'll animate this ball over to the side of the screen, and, I don't know, we'll turn it blue. Why not. So there's our animation. And we'll just preview that. Yeah, it looks great, clients will pay big money for that. Good, ship it. Now step two is to embed the youtube video into my animation. Now the first thing I need to do is to select this symbol here, and give it a symbol name. video_holder And that will let me access this element from the Edge Animate API. Now to actually do the embed, I'm going to start writing some script. The final version of the script is up on my blog, but for now we'll work through the simple way first. I want this to happen on startup, so I'll select the stage, go to my actions button, and I'm going to make a creationComplete event handler. And that will fire as soon as the whole animation is ready to start. The Edge Animate API is based on Jquery. So if you're not familiar with Jquery bear with me for a moment, because I'm going to use some Jquery magic. Every Edge Animate event handler gets this "sym" property, and it exposes Jquery, so I'm going to call Jquery magic, And get a direct reference to the "video_holder" symbol element. And on that element I can call the "html" method, which will replace the content of that element with some arbitrary HTML. And for what HTML to use, for now I'll just go back to Youtube, and use there embed code directly. But there's something you need to know here. Youtube has two different kinds of embed code. There's the old version, which uses "embed", and embeds a Flash player And then there's the new version, if you uncheck that, which embeds an iframe. And the contents of that iframe might be Flash, might be HTML, depending on the situation. Now if you want your project to play back on mobile devices, obviously you need to use the new version of the code, so Youtube can serve up an HTML video if it needs to. But, the code that we'll do later, to sync up the animations, is a lot more complicated if you use an iframe. So for now I'm going to use the old version, because it's simpler. So I'll copy that script as-is, Come back here and put it right in the "html" method, I think I might put that in a string. And let's give it a shot. There we go. The video is embedded in the page, and the animation is playing. Now I just need to sync them up. Now the code for this is a little bit longer, so I'm going to copy and paste it. And not make you watch me type. But it's still pretty simple. First I'll overwrite this with some different code, and let's take a look. Now there's a whole API for accessing Youtube videos from Javascript. And it's well documented, you can check it out. But the simple thing's we'll do here are: first, when you embed a Youtube video, it automatically calls this onYoutbePlayerReady function, as soon as it's ready. So I'm going to catch that, and keep a reference to the player, called "player", and I'll add an event listener for "onStateChange". That's going to be called any time the video plays or pauses. And I'll define a handler to call, and it's write here. And in this handler, all I'll do is, I'll get "currentTime" from the player object, I will multiply it by 1000, to convert from miliseconds to seconds And then I'll pass it to the play() or stop() methods of "sym". And this script is attached to the stage, so the symbol in this case is the stage. So this will just play or pause the root timeline, from whatever the current time is of the Youtube video, and this will happen every time the video plays or pauses. Easy peasy. And down here, I've changed the code just a little bit from before. First I've pulled out the video code so it's easier to change, and then there's a couple of parameters that I add on to the embed statement. These basically tell Youtube to enable the Javascript API. And this all comes directly off of the Youtube JS API documentation, so it's easy to set up. Now let's preview this, and see if it works. Okay, and the videos are keeping time, perfect, awesome. The only thing is, you saw the animation auto-played before the Youtube video had started. So I'll jump back here, select the stage, and turn off "Autoplay". And that's it, the basics are now done. But before we finish I want to go back to what I said before about embedding things in an iframe. And I'll show you the code in my finished project. This code is meant to be modified, so I've pulled out the video name, width, height, and so on so that they can be easily changed. But I've also got a boolean for whether or not to use an iframe. And things work a little differently for embedding vs. using the iframe. When you're embedding, like I said before, you just make the object tag, you pass it right into the html of the video_holder, and then this function will get called as soon as the Youtube video is ready. When you're using an iframe, it's a little bit different. First you have to define a script tag - make an actual tag for a script element - set its source to be the iframe API provided by Google, And then that script will set up all your events. And the events are accessed a little differently, different function here, but also you're getting a real event with real objects, rather than just a code. So I catch the event, I call its "data" property, and that's the same 1 or 2 that we got in the older embed API. And I pass it up to the same event handler as before. And then as before, you make an iframe tag And plop it right there into the "html" property of the video holder we made earlier. The other difference that you have to be aware of, is that when you're doing this with an iframe, the Youtube APIhas to explicitly give permission to your content to call JS functions inside the iframe. To do that it has to know what site your content is at. So I've pulled that out into a variable called site_url, and that would just be the name of your site. And by the way, when you're testing this, previewing directly from Edge Animate, Edge Animate has a minimal web server built into it, that it uses to preview content. So when you preview stuff it looks like it's being served from localhost:54321. So if we pass that to the Youtube API then everything works. So let's make sure it works in iframe mode. This is now using the iframe, and just like before we're getting the animations all synced up. So there you have it, visually authored animations playing in HTML5, and synchronized to an embedded video. Pretty cool stuff. Try it, let me know how it works out. This is Andy from Adobe, and I'll see you next time.