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

The vzaar video player does a lot of neat stuff. However, there are always ways to make things cooler. For instance, did you know you can make the player respond to your viewer’s situation? For example:

  • Changing the video for a mobile device. Perhaps to an abridged version, or a lower bit rate, which will perform better on mobile connections.
  • Detecting a screen’s orientation and sending a portrait video for portrait viewing.
  • Changing the video according to UI interactions. For instance if someone opens a dropdown menu, or changes a tab on a different part if the page. That’s great for guiding users around a site or just building an expanded player UI.

All these things are possible using a few conditional statements and our API’s loadVideo function. The great thing about the loadVideo function is that it doesn’t reload the player. Just the video inside it. Making the whole process fluid and non-jarring for the viewer.

Let’s look at a few examples, so you can see what I mean and get some ideas (before we dive into the technical stuff, please do note that this post is really more aimed at those who are familiar with JS – we’ll be using standard JavaScript (no jQuery) throughout).

Basic use of the loadVideo function

To start with let’s check out the loadVideo function itself. It’s gloriously simple. All you need to do is call the function on the vzPlayer object in your JavaScript, once the player’s ready. Something like this will do the trick nicely…

window.addEventListener("load", function() { 
    var player = new vzPlayer("vzvd-2302957"); 
    player.ready(function() { 
        player.loadVideo(1234567); 
    }); 
}); 

The loadVideo function takes a single argument: the ID of the video you’re loading into the player. The rest of the script deals with waiting for the page to load, setting up the vzPlayer object as a variable, and making sure the player’s initialised. There’s some more information on getting things setup in our documentation. Once you have loadVideo set up you can then start to get really clever with your videos…

Simple responses to button clicks

Probably the most common use case for the loadVideo function is to change the video in response to a user interaction. For example somebody clicking a button, which you’ve placed on your page. So let’s get started with a simple example of listening for a button click. See what happens when you click for the puppy (aww).

 var loadVideoButton = document.getElementById('loadVideoButton'); 
   player.ready(function(){ loadVideoButton.addEventListener('click', function() { 
      player.loadVideo(1376258); 
    }); 
 }); 

Here’s the result…

Click here for a puppy!

Nice and easy! We get our button by it’s ID (loadVideoButton in this case) and make it a variable within our script. Then we wait for the player to fire its ready function. Once the player’s ready, we add an event listener to our button, which will fire on the ‘click’ event. Finally, when the button’s clicked, a shiney new video is loaded with the loadVideo function.

Responding to particular devices

To respond to a particular device type all you need to do is write an ‘if’ statement, which checks the device’s user agent. If the statement’s true, the player’s loadVideo function is called with a video ID specific to the device you’re looking for.

There are a few ways of writing the condition. Personally I like using JavaScript’s test method. That way you can write a regex and, if a match is found in the user agent string (navigator.userAgent), the condition is true.

player.ready(function() { 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test 
     (navigator.userAgent)){ 
         player.loadVideo(2178912); 
     }; 
 }); 

Check out this video on desktop and mobile to see the difference…

An alternative approach would involve using JS’s search function, to check the string for particular contents. For instance, something like this..

if (navigator.userAgent.search 
 (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i) != -1){
     player.loadVideo(2178912);
} 

That’s the same regular expression but it returns an index, rather than a boolean. As far as I know, if a search result isn’t found, an index of -1 will always be returned. However, I await the day a browser quirk will prove me wrong on that (hence my preference for the other approach).

Responding to screen orientation

In a way, this is easier than the previous example. Screen orientation will always be either portrait or landscape, so there’s no need for any regex. There’s no method in JavaScript for detecting orientation but, of course, you don’t need one. All we need to know is whether the window is taller than it is wide.

if(window.innerHeight > window.innerWidth){ 
    player.loadVideo(2178912); 
}else { 
    player.loadVideo(2178913); 
}; 

That’s nice and simple. However, it does raise a problem which we haven’t encountered previously in this article. The loadVideo function’s ability to change the content, without reloading the player, ends up giving you portrait video content within a landscape player (or vice versa). I bring this up because it’s a nice exception to rule. Maybe here it would be better to reload the player, rather than swapping the video?

Of course, doing that doesn’t require anything too clever. All you need to do is create a div (let’s say our’s has the ID “vidCont”) and change it’s contents by altering the value of JS’s innerHTML property. Just like this…

if(window.innerHeight > window.innerWidth){ 
    document.getElementById(“vidSwitch”).innerHTML = portraitEmbed; 
}else { 
    document.getElementById(“vidSwitch”).innerHTML = landscapeEmbed; 
}; 

The result is this. Check it out…

Now watch on your mobile…

NB. For the sake of brevity this assumes that portraitEmbed and landscapeEmbed are variables, containing an embed code. If you wanted to get clever you could define them as a function and pass them a video IDs as an argument. That’d make everything nice and reusable.

Further usage

So, those were a few straightforward projects for expanding the functionality of your videos. However, there’s no need to stop there. Let’s take a look at a few more elaborate ideas:

1. Geographically specific videos

There are a number of nice methods for geolocation. One is HTML5 geolocation API, which makes the process nice and simple.

Alternatively, for something which will work with older browsers. It’s always possible to implement geolocation using either a server side script or by leveraging an API. Check out geoPluign for a commonly used example.

2. Altering content according to a URL’s query string

With a healthy dollop of regexes you can grab query string values, straight out of JS’s window.location property. Those values can then be used within conditional statements, to load particular videos.

StackOverflow has an excellent thread discussing how to do this, which you can find here. The top answer is really quite clever.

3. Making some sort of awesome playlist, which interacts with the surrounding page

The button pressing example from earlier can easily be expanded. For instance, your buttons could be a series of video thumbnails, each loading a different video into the player. Voila! For all intents and purposes you’ve made a playlist.

Of course, now you have a playlist you can control entirely from your own JavaScript. As a result, you can deeply integrate it into the rest of your page; altering the page content to match your video.

For instance, whenever a new video loads, you could change the innerHTML property of another div. Perhaps to provide a different description, a title, or some corresponding images.

4. Timed videos – come back later for… EXCITING NEW CONTENT!

Nice and easy. Use JSON to grab the time from a server; either your own server or a time API service (yes, they exist and there are several – here’s one that I’ve been using lately).

Once you’ve got the time, check if it’s equal to the time your special video should play at. If it is, use the loadVideo function to make the switch and show your timed video!

5. Utterly random videos – give your viewers a surprise and a taste of different content

Here’s a bit of fun, which should encourage viewers to keep visiting your pages. Make an array of video IDs, then pick an index from that array at random and pass the resulting value into the loadVideo function. Result: unpredictable surprise videos!

Of course the fun part of that is random (or rather pseudo-random) number generation. You can do that with a little maths and JavaScript’s random method. Head over to W3 to see how it works.

Wrap up

That’s about it from me folks. I hope that was a fun little read.

Just remember if you can imagine something, you can likely code it. Of course, with that in mind, I’ve barely scratched the surface here. Give some of these ideas a try and see what else you can come up with.

Finally, should you run into any difficulties, just let us know. Our support team would be very happy to help you out with any crazy inspired projects.  

Categories Tech Tips
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)

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)