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 javascript

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)

Take control of your vzaar video player with the JS API

JavaScript code

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…”



Categories Video Production
Comments (0)