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 vzaar updates

gamejam2014TL;DR: We made games and you can play them here!

You can't think about online video 24/7. Well, I mean you can try. But unless you prefer your breakfast served in capsule form by a kindly lady wearing white whilst you whimper softly about aspect ratios, it's good to take a break once in a while. Which is why, every month or so, we on the vzaar dev team take a break and get together for a good, old-fashioned code challenge to slow down the inevitable descent into fatuity. It mainly works.

A burned-out programmer has his opinions about text editors medically realigned

In the past, we've come up against some pretty varied challenges. We've refactored code. We've written programs to encrypt and decrypt messages using Bruce Schneier's Solitaire Cipher. We've even created DSLs, and if that made you snigger then grow up, because I'm talking about Domain-Specific Languages. Yeah.

When the opportunity finally fell on me to set the next challenge, I wanted it to be a bit different to the previous exercises. And I wanted it to be fun. It ended up being at least one of those things. That's because I remembered what it was that got me into programming in the first place: playing games on my rubber-keyed ZX Spectrum, and the joyful revelation that I could make my own, simply by writing millions of lines of code that become infinitesimally less incomprehensible as time goes on, until maybe one day you sort of understand what you're doing.

The challenge, then, was obvious. The dev team must Make Dan A Game. Some of them took this more literally than others. These were the rules:

  1. Use any language you like.
  2. It can be any sort of game. Dan does not mind.
  3. Console, browser, or even GUI. Your choice.
  4. The game can be small or large. Or somewhere in between.
  5. The game must be fun.

Simple, right? Well, yes and no. As I should have remembered from my early attempts, making games is hard. During my idyllic youth, the most accessible method of making a game would be to copy out hundreds of lines of BASIC, and pray that you didn't make a mistake.

While the games had exciting titles like ROCKET, they were a far cry from the games we played in amusement arcades. In most, the general flow of gameplay required you to enter a number, after which you'd be told that you'd died. If you're part of the generation before me, you were even less lucky. If you even had access to a computer, the best you could do would be to put a punchcard in it, which would come back out several days later with some extra holes that would inform you you'd died.

"The goblin does not like the number 3, so he has eaten your face. Would you like to play again? Y/N"

Thankfully for us, though, making a game is way easier nowadays. Frameworks like Phaser take all the hassle out of such trifles as physics and collision detection, so that you can explode stuff and inform the player that they've died with just a few lines of JavaScript.

So, now we're all up to speed with my meandering, subjective take on computing history, let's take a look at some of the "highlights" of the pioneering vzaar game jam!

Lawrence - Virtual Startup Party
screenshot does not represent actual gameplay

very heideggerian

As we all know, Lawrence loves support. And he loves the warm glow of doing a good job. Not everyone in support holds themselves to such high standards though, and to illustrate this, Lawrence's game was based around the existential ennui of dealing with a company that only responds to one email a day. He achieved this by making a text adventure that would only allow you to make one move a day. It's a brave mechanic; maybe what you'd even call an anti-game. On the plus side, this gives you plenty of time in between turns to sit outside Parisian cafes smoking Gauloises and generally being a 19th century hipster.

The game's score is worth noting: an 8-bit version of Get Lucky on a permanent loop, which I'm pretty sure is what Heidegger was listening to when he wrote that "profound boredom, drifting here and there in the abysses of our existence like a muffling fog, removes all things and men and oneself along with it into a remarkable indifference."

Dan's rating: A+ for inventing a new genre, D for making me think
Play Lawrence's game here!


Terry - PONG
screenshot does not represent actual gameplay

screenshot does not represent actual gameplay

Just to remind us of how far Moore's Law has taken us - or possibly because he'd only left himself an hour to complete the task - Terry wrote a PONG clone in JavaScript. For any younger readers, PONG was one of the first arcade games to reach mass popularity, and was ostensibly a tennis simulation, if you imagined the players as featureless white rectangles floating in a black void. Pretty much like Andy Murray, in fact.

Terry was so old-skool in his implementation that he somehow made a version even less feature-packed than the original. Nonetheless, the power of a truly iconic game shone through and we all ooh-ed and aah-ed as Andy inched shakily up and down the screen, uttering a strangulated beep of excitement when he successfully volleyed the white square towards the other white rectangle.

Dan's rating: A for nostalgia, C- for effort
Play Terry's game here!


Alan - Flappy Dan
a typical scoreboard

a typical scoreboard

Yes, Alan went there. He made a Flappy Bird clone. And despite the topical appeal of a flap-like, it's actually a pretty ancient game mechanic so it fits in with our retro theme nicely, kind of like if your grandparents used snapchat. There isn't a great deal to say about Flappy Dan that hasn't already been said about its avian precursor, except that it is testament to both Alan's skills as a programmer and the Phaser framework that you can knock out a clone like this in such a short time. Either that or it's testament to how bad of a game Flappy Bird is.

Most notably, it was the most popular game amongst the vzaar staff, and I can honestly say I never expected people to be so passionate about avoiding smashing my face into a Mario pipe.

Dan's rating: A++ for quality, E- for the very crude pixel rendition of my face.
Play Alan's game here!


Dan - Space Invaders By Candlelight
what a dashing gent

what a dashing gent

"It's the dead of night. You hear a deafening cacophony outside, and as your instinct to protect your family is the first to take hold, you rush outside with only your trusty candle and laser gun. You can see missiles raining from the sky, but where they are coming from? What could be happening?" This is how I should have begun my presentation. With a story about how my game was some sort of conceptual piece about the nature of the unknown.

But in reality, I didn't have much time, so I stole a space invaders demo and added a lighting effect that would obscure everything but the player itself. Feeling that this was slightly unfair, I added levels and made the candle's radius increase each time, so that you might gain a glimpse of your unseen nemeses. Feeling that this was slightly too fair, I then made the aliens stronger and more trigger-happy each level until it reached just the right amount of early-video-game-impossibility.

Dan's rating: A++++++
Everyone else: "I don't get it"
Play Dan's game here!

So that's how the first ever vzaar game jam went down. If you're interested in making games, it's easier than ever so give it a try! Feel free to look at our source code, but please bear in mind our games were the result of frantic - rather than responsible - hacking. And please leave us a comment to tell us which game you liked best! Especially if it was mine.

Categories Community, Tech, vzaar updates
Comments (0)

There’s all sorts of stats floating around that tell us that product videos work: they engage consumers and websites that add videos to their product pages typically sell more than those that don’t.

But, just like with any piece of content, you need to give your product videos the tools they need to perform. Here’s what I recommend.

1. Video SEO

You first need to make sure that people can find your product video. This is where good video SEO comes in. Videos have a much higher click through rate in the search results than their plain text counterparts. But how do you make sure your videos appear for a given query?

A video sitemap.

Google (currently!) has no way of watching your video. So it doesn’t know that when someone types “how do I apply foundation” (for instance), that your video provides the perfect answer to this.

A video sitemap is how you tell Google what your video is about. Once Google has this information, it then knows whether to display your video for a given search term.

Let’s work through an example of how to do this with vzaar.

1. Turn on video sitemaps:

By default all of your videos will be included in your sitemap. If you wish to exclude any of them you can, just head to their individual settings page.

It’s also a good idea to turn on auto sitemap generation. This just means that instead of you having to manually regenerate your sitemap every time you make a change, we will do it for you (one thing worth noting here: we regenerate the sitemaps once per day if you want your change to go live immediately you will still need to manually regenerate).

vzaar video sitemap options

2. Copy & paste into robots.txt

You’ll then notice we’ve generated a line of code for you, copy and paste this into your robots.txt file on your site. Check you’ve done everything properly at this stage, you can verify your robots.txt file:

how to verify your video sitemap in vzaar

3. Check your sitemap statistics

Now, you’ll notice just below all this there’s a sitemap statistics section. This tells you which videos will be indexed by Google. It will also flag any errors. It’s really, really important that your sitemap doesn’t contain errors as these will actually harm your SEO.

Don’t worry though, we automatically detect errors and exclude those videos, until you fix them.

An error usually occurs when you are missing some of the information the sitemap needs: the video title, description and URL it’s embedded on. Fixing these errors is easy. Just hit edit and enter all the information.

vzaar sitemap statistics

You can also enter this information on each individual’s video page.

If you want to find out more about this take a look at our video demos or read through the help document. Oh, and don’t forget to check out these tips from Moneyweek which saw them grow site traffic 136%.

2. Playback Control

Once you’ve started to drive traffic to your product videos you need to make sure they’re performing properly. To make your videos a buffer-free zone be sure that you’ve got progressive download turned on. This will mean your video loads ahead of time so it streams nice and smoothly.

You should also test out different bitrates. If you encode your video at too high a bitrate you’ll wind up with a huge file size that has difficulty getting through to slower Internet connections. We typically suggest you encode at 2,000 or smaller, this is the speed of the average Internet connection so this should work for the vast majority of people.

vzaar account encoding options

If you still want to give those with fast Internet connections HD quality – you can. Just enable dual encoding. As the name suggests this will render two versions of your video. The fast Internet connections get the high quality, while the slow Internet connections get a smaller file size and less buffering.

Find this whole bitrate thing confusing? Help is at hand check out this blog post or get in touch and we’ll walk you through it.

3. Customize Your Video Player

You should also be sure to give your product video that professional touch with your own customized video player. Use the color picker in your account, or enter the HEX code of your existing brand colors and hey presto – a video player that looks like you made it in house :)

4. Include a call to action

How do you get your viewers to buy your product?

Ask them to!

You should make it really, really clear what action you want your viewers to take after they’ve watched your product video. Using end screen text you can craft a compelling call to action at the end of your video to encourage conversions.

And again, it’s really just a matter of a few clicks to get going with this. Under the branding tab you’ll see an option for end screen text. Just fill in the copy you want to appear and the page you want to link it to (the shopping cart for example).

Add video call to action in vzaar account

Check out the video demo here for a quick walk through.

Happy selling!

Video Made Easy: Animoto & vzaar

Hayley
article by:

It may not surprise you to learn that at vzaar we heart video. Seriously, check out how powerful it can be:

But, a lot of people assume that video is expensive, time consuming and difficult to do. Which can be true, if you don’t have the right tools.

So, here’s the secret: Animoto.

You can now easily create professional videos using Animoto and seamlessly export them to your vzaar account – all with a single click!

We made this video using Animoto and we were amazed by just how easy it was! So easy in fact our lovely intern Geoff managed to pull it off in just a couple of hours. And that was from putting together the assets we used (read: posing for photographs!) as well as producing the video itself. I’ll hand him the reins, here, to walk you through how he did what he did.

Screenshot_02_06_2014_14_28

“My mission: put together a video to showcase Animoto, using Animoto.

Step 1: Choose the video style: We went for a fairly simple style to keep the emphasis on our message but Animoto have tons to choose from depending on the type of video you’re going for. Step 2: Add captions Step 3: Create the soundtrack. There’s a vast music library to choose from. Once you have your perfect music clip you can trim the song length to match your video. Step 4: Upload your logo (branding, it’s important) Step 5: Umm, that’s pretty much it… Just hit produce and your video is made!

The best part: the whole process took only a few hours.

Once you have your masterpiece finished you can export to vzaar and take advantage of our security, video SEO and player customization tools.”

There you go, Animoto: so easy the intern can do it ;)

Lots of businesses are already using Animoto to create beautiful videos of their own. Like these ones:

And you can too!

Not only do the generous folks at Animoto already save you time and money during the video production process, they’re also offering 20% off to all vzaar customers (enter vzaar20 at the checkout)…so go forth and make some videos. Enjoy!

 

Categories Video Production, vzaar updates
Comments (0)

A few days ago we explained the design changes we’ve made to our brand new player. But, that’s not all that’s changed. There’s been PLENTY going on behind the scenes. Yup Terry and Jon (our player devs) have been super busy working hard to bring you a video player that not only looks great, but works better too. I managed to grab a bit of their time to find out what’s been going down…

vzaar's Terry

A big part of the work we’ve done on our video player has been under the hood. The player still plays videos just as it always has, but the code making that happen has had a pretty major overhaul.

The focus of this behind the scenes slog?

Speed.

Both in being able to bring you updates quicker than before, and in the time it takes the player to load and video to play.

What are the changes?

 

Faster Loading Times

The first thing we did was put the flash player on a diet. By trimming all the excess fat we could find we managed to make it nearly 20% lighter, which means it loads nearly 20% faster!

But we didn’t stop there.

We also put a lot of effort into optimizing every single little task the flash player completes whilst streaming your beautiful videos. As a result the playback is super smooth.

 

Scrubbing Thumbnails

Scrubbing thumbnails is basically a system that lets your viewer see what would be going on in the video if you scrubbed to that point. As you move your mouse up and down the progress bar, a thumbnail showing what’s happening at that point in the video will pop up over your cursor.

scrubbing thumbnails

When you upload and encode your videos we take frame captures every few seconds. We then stitch these together into what’s called a superSprite and pair it with a VTT reference file. This tells the player what images go with what time, and voila – you’ve got your rollover thumbnails.

Just a quick note that I should add here. This feature will only be available for future uploads, and a few lucky videos that have been processed since the behind the scenes work went live! We won’t be able to retroactively apply this to videos uploaded before we made our update.

 

Accessibility

We also wanted to make the new video player more usable for those with disabilities. It now boasts vastly improved keyboard controls. Check them out:

Spacebar: Activates button if a button has focus, or toggles play/pause if no specific button is selected

Left/Right arrow: Seek backwards/forwards 5 seconds

Up/Down arrow: Increase/decrease volume

Numbers 1 – 9: Seek to between 10% to 90% of the video

Home/End: Seek to the beginning/last seconds of the video.

You can use the tab button to move around the player controls as well.

 

HTML5 Updates

The really cool thing is that these updates are also available on our HTML5 player. We’ve done a massive overhaul to bring it up to speed with our Flash player. So now, both players are super fast, super slick and offer the same functionality as each other.

Here’s where I hand over to Jon, our HTML5 developer extraordinaire, to talk through some of the biggest changes…

vzaar's Jon

Our HTML5 player has undergone a pretty major update. We’ve rejigged our whole codebase to sit nicely on top of the open source VideoJS (v4) library. This allowed us to bring tons more functionality to HTML5.

As part of the update we’ve implemented a new plugin architecture, giving us a more standardized method for adding extra features to our base player. Because of this new architecture we’ll be able to add to and update the HTML5 player quicker and more easily than its predecessor.

What are the changes?

A lot of our work has been to bring HTML5 in line with what is already offered by its Flash counterpart. Many of the features previously only available within the Flash player have now been added to HTML5:

  • Better Mobile Support
  • Player Customization NEW to html5!
  • VAST Video Advertising NEW to html5! As well as the new VTT Scrubbing and Accessibility Shortcuts we’ve added to both the Flash and HTML5 players.  

    Better Mobile Support

    The mobile space is a fragmented one. All the different devices, models and operating systems present a bit of a challenge for a HTML5 developer like me! We rebuilt the HTML5 player with the mobile Internet in mind, so it’s now got even better support for the multitude of different mobile devices and browsers (trust me I did a lot of testing!). Plus, with our design tweaks, it works much better with touch screen interfaces.  

    Player Customization

    We’ve built a much more flexible HTML5 player with greater customization options. You can now customize: - player colors - player controls and behavior - social sharing options  

    VAST Video Advertising

    All new for HTML5 is VAST advertising support. There’s a few different plugins available that will allow advertising in the HTML5 player. BUT, we soon found out that many of these are limited. For instance, some support pre-roll ads but not post-roll, while others will only show the same single advert in each ad slot (pre, mid and post roll). We didn’t want to place those same limitations on our own player so instead we built our own custom plugin. Writing this plugin allows our HTML5 player to share the same advertising features as the Flash player (exciting stuff!)

    In Summary…

    The big news is that our player loads faster and plays your videos much more efficiently. We’ve given it a bit of a facelift and added a few functionality tweaks to give your viewers the best experience possible. We’re rolling the update out gradually but if you want to get your hands on it right now get in touch and let us know.
Categories vzaar updates
Comments (0)

vzaar video player design update

Digital lives are changing. How our customers use video, and how their customers watch video, is in a constant state of evolution. We know this and we’re working hard to improve one of our pillars: the video player design.

We decided to update our player, giving it a much fresher, more contemporary appearance. Our ultimate goal is simplicity, functionality and usability. Never forgetting user experience.

The challenge for me as a designer is in creating something that looks good AND is intuitive to use. The navigation throughout the player has to be clear and quick, natural and easily. By simplifying the design of the player we are aiming to put the focus on what’s most important: the video itself!

It was also super important that we stay true to the vzaar style. Rather than make a huge, sweeping change we decided to make the design tweaks gradual. We believe in an evolutionary design of our player, keeping the elements that already work great and that our customers are used to.

The player is still recognisable and familiar, we’ve just breathed a bit of new life into it.

What are the changes?

Enough of the philosophy behind the design makeover; you’re probably wondering just what are the changes we’ve made?

In a nutshell:

Sit tight, I’ll run you through them. Or you can skip to the sections you want to know more about.

 

Streamlined Controls

Your video is the hero.

Mostly, the changes we’ve made have all been to put the video in center stage. We wanted to de-clutter the player to give your content space to breathe. This will mean your audience focuses on your video and its message.

We started by removing any visual elements that weren’t essential to getting things done, such as the time played in the bar controls or by displaying the full screen button at the bar control instead of the top. Now the viewer sees the time played by rolling over the progress bar: on a need to know basis only.

 

Stylised Icons

The new icons are stylised. Mainly based in a stroked design. Now that they are thinner, the player looks much cleaner and more contemporary.

Video player icons

 

Full Screen Layout

One problem we faced was that as we have added more and more features to our player – more languages, different social sharing options etc. – the navigation has become a little cumbersome.

When our player only supported two different languages, for instance, the use of a drop down menu from which to select the language worked well. But as this list has grown the player becomes more and more cluttered.

To make everything lighter and fresher we’ve replaced the drop down menu with a full screen layout. This simplifies the flow and makes it much clearer what action the viewer should take: helping them complete that action successfully.

Video Subtitles Full Screen Layout

This gives us much more flexibility in the future, too. As the number of features of our player continues to grow, the player can grow with them. We can simply use the full screen layers for new features in a similar pattern. This way, when a change happens the design stays broadly the same so the learning curve of the user will be much smaller and his/her behaviour more intuitive.

 

Scrubbing Thumbnails

NEW to the vzaar video player are scrubbing thumbnails. When a viewer rolls over the progress bar they’ll see a little thumbnail of the video from that time point. This will make it easier for viewers to skip to sections of your video that are relevant or more interesting to them.

vtt

 

Better Windowed and Multi Device Support

The popularity of mobile video means that your viewers now watch videos on screens of all shapes and sizes.

Our player already works with both Flash and HTML5, but we have now made it so that the size of the controls now scales with the screen size.

The new player has three breakpoints: 400px, 300-399px and 300px to coincide with bigger and smaller screen sizes. Each breakpoint defines the appearance and control navigation of the player. For each of them we assessed which controls could be removed to make the navigation easier.

player-sizes

For instance, on smaller screens it’s important to strip the design back: too many controls would overshadow the video entirely! In this case we streamlined the player and included essential functions only: play, pause and full screen.

This allows us to improve the usability of the player on smaller screens, while keeping the look and the feel of the design intact.

 

Player Customization

The new video player keeps the same customization options. You can choose the color of your player from the color picker, or by adding the hex value of your existing brand colors.

You also have control of which features you want to include in the player (social sharing, full screen, subtitles). You can even choose to hide the controls altogether using the hideControls, disableControls and autoplay settings (if you want to do this have a read of this help document that explains more).

Customizable Video Player

In Summary…

There you go: the design changes you’ll see and the reasons behind them. We’ve also made tons of functionality improvements so that the player works more efficiently.

We’ll be rolling these changes out across our user base in the next few weeks (or so). If you’d like to get in on the action right now and start benefitting from all the improvements we’ve made just get in touch and let us know.

All that remains to say is: we hope you like what you see and we’d love to hear your feedback!

Categories vzaar updates
Comments (1)