vzaar – Player API
The other week I wrote a little bit about our REST API. This week it seemed only fair to fill in the other side of the puzzle and tell you all about our player API.
What does it do?
The API itself can achieve all manner of awesome things. To start with let’s take a look at some of the great examples, which are already out there.
ChapteringThe API includes a `seekTo` function, which can be used to reach a particular point in any given video. String a few uses of this function together and you’ve essentially put together a set of chapters. This is great, as it means viewers can easily skip to sections that are particularly relevant for them.
Here’s an example, which we put it together for another blog post, last summer. It uses our jQuery library to quickly add chapters to a video. The library itself provides styling for the chapters and does all the heavy lifting, so all you need to do is plug everything together and tell it where your chapters should go. You can instructions for doing that in the library’s readme file.
BookmarkingAnother neat trick, which you can see in the jQuery library, is video bookmarking. This is essentially another use for the API’s `seekTo` function. This time, rather than using the `seekTo` function on click, we’re saving a time in a cookie and then seeking to that time when the page is played again. Essentially remembering where the user left off. It’s a great trick for lectures, longer productions, weddings and bar mitzvahs.
Here’s an example of it in action. Pretty awesome, no? Well, once again it’s a cinch to set up. Check out the jQuery library’s readme file to see how.
QuizzesOf course, the fun doesn’t stop with the jQuery library. That’s just one thing, which was built on top of the player API. The beautiful thing about the API is that it offers a simple set of methods for interacting with the player. Using those you have every resource you’ll need to integrate your own code with the player.
Here’s a good example. Last year I put together a blog on using the API to add interactive quizzes to the player. The result is a quiz which essentially appears to be a part of the player itself. However, let’s take a step back here. Most of the code this utilises controls the quiz itself. To hook everything together, it just needs the player to do a few simple things.
- tell it where the video’s played up to, so it knows when to show the questions
- pause the video when a question is displayed
- play the video again when the question is answered
- let the quiz know when the video’s ended, so it can show the score
A myriad of video loading tricksContinuing on that theme, just before Christmas I put together a little (slightly daft) compendia of uses for the API’s `loadVideo` function. The `loadVideo` function is one of those great little tools, which quickly proves itself to be invaluable. Quite simply, it will let you load another video into the player.
Now, at first glance, that may seem like mundane task. However, it can be used to build all manner of things. In the blog I looked at changing the video depending on the viewer’s device, their screen orientation, or after a button click. The idea of loading different videos depending on the context, just seemed really cool to me. As for the button clicks, that’s a little more ordinary (there’s a video below showing it in action). However, making the player change videos on a click is only a few steps away from building your own custom playlist. Something that’s very achievable with the API.
Taking your first steps with the player API
Ok, so that’s what you can do but where do you start?
To get everything up and running all you need to do is link the library into your HTML document’s head and create a new instance of the library’s vzPlayer object. After the player object’s been instantiated, interacting with is just a matter of calling the library’s pre-defined functions. For instance, if everything’s set-up correctly,
playPause() will play or pause the video. Link that up to a button and you’ve taken the first step towards building your own set of controls.
There’s some great documentation, outlining the process for setting up the API in more detail and listing all it’s functions, which you can find here. It should help to get you off to a flying start and naturally, if you run into any problems, our support team are here to help.
Happy coding and stay awesome!