vzaar - The professional video platform blog Min vzaar site
vzaar is an online video hosting service with fantastic features that are designed for business. Deliver to mobile or the web straight from your site.
 

Archive for API

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.

The player API is a front-end, JavaScript, API, which allows you to communicate with and manipulate the vzaar player. It allows you to integrate the player deeply into your webpages and make the two interact. Effectively, it helps to break down the barrier between your videos and the rest of the content on your webpage.

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.

Chaptering
The 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.
Bookmarking
Another 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.
Quizzes
Of 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.
  1. tell it where the video’s played up to, so it knows when to show the questions
  2. pause the video when a question is displayed
  3. play the video again when the question is answered
  4. let the quiz know when the video’s ended, so it can show the score
You see? Each piece of that information is vital to the process. They’re all simple interactions but without them the quiz wouldn’t be able to do what it does. It’s amazing how a few little bits of integration can quickly allow you to build something pretty cool.
A myriad of video loading tricks
Continuing 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?

If you have a little JavaScript experience, setting up the player API is quick and easy. The heavy-lifting of communicating with both our Flash and HTML5 players is handled by a JavaScript library, which we’ve already written.

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.

If you’d like to learn more about the vzaar API check out the page here, or drop us a line – always very happy to help with any video projects.

Happy coding and stay awesome!

Categories Tech, vzaar updates
Comments (3)

First things, first..

What is the rest API?

REST stands for representational state transfer. It’s a fancy way of saying you can send HTTP requests to vzaar, and vzaar will do stuff for you.

Basically, the REST API will let you build your own custom platform, off the back of vzaar. You can integrate your own web application into our own, allowing you to harness the years of work which have gone into vzaar, and saving you from reinventing the wheel.

So what does it do?

Imagine a scenario where your videos are added to your web pages automatically, whenever you upload a new one. Hell, why stop there? The API will allow you to upload videos from your own webpages too. If you wished, you could build a whole video application, allowing users to upload and interact with their own content automatically, using the API.

Ok, that’s all a little esoteric. How about some examples?

Video training portals

LearningZen gives its clients the ability to create their own online training portals. The team used the vzaar API to integrate video into this platforms. Giving their clients the option to create video based training portals.

“We were also looking for a service that could be fully integrated into our own product at an API level, eliminating the need for our content creators to leave LearningZen when uploading videos and placing them into their own course materials.” – COO, Thomas Klassen

Read More

Personalised video messaging

Not an application for popping the question remotely. ProposalApp allows sales pros to connect with their prospects, including a video of themselves in their proposals.

Read More

CMS with easy video integration

Parallax are a digital marketing agency. As a result, for them, video forms a single part of a multi-media arsenal they use for their clients. Using our API they created their ‘Expose’ CMS which means their clients can add videos to their sites really, really easily.

“The user simply clicks ‘add video’ in the interface. This adds a video placeholder to the page. They then click on the placeholder and select the video file. The file uploads to vzaar and, after it’s finished encoding, it will play on the page.” – Director, Dario Grandich

Read More

In a nutshell…

The REST API integrates with vzaar’s video management functionality. Allowing things like uploading and accessing video data think of it as allowing you to do all the things you’d normally log into your account to achieve. Except, you know, without actually requiring to login.

Hang-on? Wait?! What?! My account can be controlled without logging in?! That sounds terrifying?!

Well, no. The REST API still requires that you authenticate to perform the majority of actions.

To authenticate with the API, you’ll need your username and an API key (randomly generated muddle of characters, which you can create in your account’s API settings). These two values are then used to generate an OAuth signature, which tells vzaar you have access rights for the request you’re making.

An OAuth what now? Where does that come from? Hold tight and I’ll explain…

The techie bit

The OAuth signature is programmatically generated. However, I wouldn’t get too hung up on the details. We offer a range of libraries, in multiple different languages, which handle most of the nuts and bolts bits for you.

This means that most API tasks are as simple as copying over your username and API token, then calling a function from the library.

Let’s look at the process in Ruby, to give you an idea of how simple it is.

require ‘vzaar’

vzaar = Vzaar::Api.new(application_token: "API token", login: "vzaar login") vzaar.video_details(video_id, authenticated: true)

This will give you all manner information for the video you requested. Like this:

vzaar REST API example

Not bad for three lines of code, right?

Take a look here for all the other functions the ruby gem offers. The libraries in other languages are also similarly well-endowed. You can find a list of them all here, at present we also offer libraries for PHP, .NET, Java, node.js, Scala, Objective C, ActionScript. and ColdFusion.

In Summary

The REST API gives you a lot of extra functionality. Because the vzaar API is so flexible, you’re able to build bespoke platforms to suit your business. It basically means that you can really tune your use of video and use it create your own custom solutions.

Remember, we’re always happy to chat through any video projects, and we love hearing about the different ways businesses are using video so do get in touch with any questions, comments or ideas.

Video Hosting API Developers Learn More

Categories Tech Tips, vzaar updates
Comments (0)

Want to capture more leads from your videos? If you're a MailChimp user, you may already be taking advantage of our full MailChimp video integration, which makes it easy to collect viewers' email addresses at the end of a video. But if you're not a MailChimp user, you're not left out!  You can still use JavaScript API to add an email capture to your videos.  In fact, with the API not only can you add a capture form, you can trigger it to appear at any point during your video. This way you can reel viewers in and then ask for their contact details, say, 5 seconds in, before they can watch the rest of your content.  It's a quick and easy way to capture new leads.

I've created a mockup of this in our demo area—head on over there to check it out before I go into more detail. I've used some nifty CSS3 transitions courtesy of Daniel Eden so this will look way better on a modern browser such as Chrome, Safari, or Firefox. This will be more of an overview than a tutorial, but I've commented the source code in the demo area if you're wondering about any particular step.

1) Embed the video

This is probably an obvious step, but don't forget you need to use our HTML embed code and make sure you have apiOn=true in the flashvars.

2) Add your DIVs

I added two divs above the video: one containing the form, and another empty one which will be the semi-transparent overlay that will cover the video. At this stage you can line everything up before you hide it with CSS or jQuery.

3) Set the timer

Now it's time to fire up the API. Here we locate the video, and set off a timer.

function vzaarPlayerReady() {
  vzPlayer = document.getElementById("video");
  intVal = window.setInterval( "checkTime()", 500 );
}
In the checkTime() function we use vzPlayer.getTime() to check once the timer's gone over 5 seconds, and then set off the chain of events that follow. In a nutshell, here's what happens at that point: 1. Call vzPlayer.pause(); to stop the video. 2. Fade in the overlay div to obscure the video. 3. Do the fancy CSS3 transition that brings up our capture form.

4) Capture those emails

There is no Step 4. At least not in my demo, because I'm not capturing your email addresses. That would be wrong. The missing step here would be an AJAX call that validates and sends the info to your database. I won't go into it, but you can find a great tutorial at net tuts.

5) Clean up

We've got their info now, so it's just a matter of hiding the form and overlay - with typical panache, of course - and then sending them on their merry way with a call to vzPlayer.play2(); so that they can see the rest of your video.

Wrapping up

So, there we go!  A brief overview of harnessing the vzaar JavaScript API to rally your viewers into action. Of course, you could do anything with the form you liked: maybe ask them to rate the video, or capture more detailed information than just name and email.

As an addendum, I should mention that this trick is designed to be used primarily for capturing leads, not securing your videos .   There are ways for tech savvy folks to get around the email capture, so I wouldn't recommend using this technique alone to gate your video content, but when used as a marketing tactic you have nothing to lose and tons of qualified leads to gain!

Categories Video Management
Comments (0)

Click to download on the app store We have some great news from the vzaar tech department today. And since it’s all Apple related we feel it’s well timed with the announcement of the iPhone 4 this week.

Firstly we have a vzaar application available today from the app store. Click here to download it. The vzaar app gives you full control of your vzaar account from all Apple iOS devices (iPhone, iPad, iPod Touch) and on devices with a camera you can even edit and upload video directly.

We built this using our API and the Objective C library we built (see more about our API on our developer hub). The library and application was built by Daniel Kennett of Kennettnet. He’s done a fantastic job, and any iOS developer picking up the framework will be able to build video into there own iPhone/iPad and OSX applications very easily.

And finally…

… a bit of fun to announce the framework. We did a little labs / skunkworks project that sends your  Twitter location to Google Latitude. It’s not really video related we know, but we thought it was kinda fun and that it would be of use to the kinds of developers out there who might be building Apple Apps and would find the vzaar video API framework just what the needed. You can see this here, under vzaar labs: http://vzaar.com/labs/location-sync/

Categories vzaar updates
Comments (0)

Press Release London, UK, May 27th 2010

Apple developers can now quickly build video capabilities into their own applications

vzaar, the leading professional online video hosting platform, today announced the release of Objective-C Framework for Apple (NASDAQ:AAPL) iPhone, iPad and desktop developers.

“We have developed an Objective-C library for our API to help Apple developers build video apps right into their own applications. There is no quicker way to enable your iPhone or iPad application with video.” comments Adrian Sevitz, Co-Founder and CTO of vzaar.

vzaar commissioned Daniel Kennet (of Kennettnet) to develop the framework. Daniel says of the framework “I designed the framework to fit in with a Cocoa developer’s existing skill set — the vzaar framework fits in with Cocoa’s design patterns and you’ll feel right at home as soon as you start working with it.”

vzaar’s API has recently been used by Budweiser and MTV for online campaigns asking users to upload short videos that are entered into a competition. The vzaar video hosting API powers some of the internet’s largest video sites and this new Framework will help developers build video apps for devices such as the iPhone.

“This is an exciting release for us at vzaar and credit to the vzaar development team whose idea it was to build this framework. We have a number of clients already using this library in development and we are eagerly awaiting the release of their applications.” comments, Stephen McCluskey, CEO of vzaar.

About vzaar vzaar is an online video platform that provides an end to end video service for web applications, ecommerce website and internet publishers.

About KennettNet Software Ltd KennettNet Software Ltd is a software development company specialising Objective C and .net client software. For additional information, contact Daniel Kennett http://www.kennettnet.co.uk

US Press Contact Mark Shapiro SRS Tech PR + 1 619 249 7742 mshapiro@srs-techpr.com

Categories Press
Comments (1)