Take control of your vzaar video player with the JS API

Here at vzaar, we’ve got a lot of great features, and we’re introducing new ones all the time. Consequently, as head of Customer Support I’m frequently asked “Can I do <insert video feature> on vzaar?”

My favorite answer, of course, is “Yes.”  But second to that is “Not right now, but I’m sure it would be possible  utilizing the JavaScript API.”

Now, that might seem like the second-favorite answer of someone who should get out more, but  in my defense: I love solving problems. So, armed with a  basic command of JavaScript and a cup of strong black coffee, I set myself a few challenges based on real customer feature requests, just to offer a glimpse of what is possible.

A Caveat

The JavaScript API is only accessible through the HTML embed code on the vzaar video platform. You will need to set apiOn=true in the player’s flashvar parameters to allow any of this juju magic to happen. Now, on to The Challenges!

Challenge 1 – Chapters

We get asked about chapters a lot, and it’s really easy to implement. First off, create some links to represent your chapter names. Then we just have to harness the power of seekTo(timeInSecs) to sniff out those links from their id. Bingo, chapters. Check out the demo!

By the way, if –  like me – you suck at the 60 times table, and you’re longing for the day when time is decimalized, you can always Google “1 hour, 47 minutes and 32 seconds in seconds” to do the math for you.

Challenge 2 – Checking Progress

Maybe you want to display a call to action when the video finishes, or check on how far through the video people are making it. This can be great feedback: if your viewers are never getting past 30% of a video, you’ll probably want to start thinking of ways to keep them more engaged. I would suggest a flamboyant hat, but I’m not in marketing so don’t blame me when it all goes wrong.

In this example I’ve written a function that listens for progress (which is updated every 10%), giving motivational messages at points throughout the video, and a special prize at the end! And don’t worry, it’s only 30 seconds long.
Did I mention the prize?

Challenge 3 – Pre-Roll

This example checks when playState() changes to mediaEnded, then I’ve written a JavaScript function to replace the contents of the #video-container div with a new embed code. You could conceivably add on a post-roll using the same method, or even chain many videos together. Here’s a demo of pre-roll in action.

Wrapping Up

What I’ve done here only scratches the surface of what’s possible. Here are some ideas, just off the top of my head:

• A button that lets people skip the next 5 seconds of a video.
• Use AJAX to keep track in your database of what videos people have watched to the end.
• A playlist that responds to keyboard shortcuts.
• A gigantic panic button to mute the sound or load a new video.
• And who knows what else? The internet is your oyster!

I’ll add that there’s always more than one way to skin a cat (we’re led to believe, anyway. I sincerely hope that no-one has tried). I’m no JavaScript ninja, so there’s undoubtedly a more elegant solution to these problems if you were to use them in production.

And finally, don’t forget to let us know if you come up with a cool use for the JavaScript API. It’ll really come in handy next time I have to say “Not right now, but…”