video WordPress

Video hosting and WordPress: How to do it right

I’m getting questions about video hosting and WordPress on a weekly basis now so I think it’s time to publish an article about it. Here’s the most common question I get:

How do I upload videos to my WordPress site so I don’t have to use YouTube for my videos?

The answer to this question is “you don’t”, but that doesn’t really explain anything. So let me explain:

There are a myriad of reasons why you may want to host your videos on your own site: Maybe you don’t like the standard video hosting services. Maybe you don’t want your videos on YouTube or Vimeo. Maybe you want to restrict viewership to only specific visitors or paying visitors. All these reasons are perfectly reasonable. But the solution – to host the videos on your own server under WordPress – is ill advised and detrimental to your goals. In this article I’ll give you the reasons why you shouldn’t host videos on your WordPress site (or any other site for that matter) and then I’ll suggest what you should do instead.

Why you shouldn’t host videos yourself, part 1: Video files are big

Video hosting is complicated at the best of times. Let me illustrate why: Let’s say you have a standard 3 minute HD video. It is encoded in a standard video format (say MP4) and the total file size is 100MB (very small btw). You upload it to your server and use a plugin to embed the video in a player on your site. You visit the site and play the video and it works fine. What happens when you watch the video is your browser downloads the entire 100MB file and plays it. Now think about what happens if 10 people go to the site and try to watch the video at the same time: The server has to upload a 100MB file to 10 different computers at the same time so it is actually uploading 1GB of data. Now imagine if 50, or 100, or 500 people try watching that video at the same time. For every new person who watches the video simultaneously, the server will have a harder time getting the file to the viewer. The service will be slow, and after not too long you’ll get an angry call from the hosting provider saying you need to take the video offline.

You see most regular hosts are not designed to serve up video files. There are customized hosts that do this well, but they are few and far between.

Why you shouldn’t host videos yourself, part 2: Codec Fragmentation

The web is no longer restricted to desktop and laptop browsers. People access the web using smartphones and tablets as well, and TVs and game consols are now shipping with web browsers as well. What is not well known is that all these different platforms use different types of browsers and these browsers in turn interpret video differently. Back in the day (2 years ago), video on the web was pretty much displayed using either Flash or QuickTime. Today Flash has largely been replaced by HTML5 video, and each browser has its own preferred codec for this video format.

If you’re not a video geek like me that makes no sense so let me translate it into plain English: Different web browsers, on your computer and on tablets and smartphones, speak different video languages. And for whatever reason they usually only understand one video language. As a result if you only upload one video file in one language, anyone using a browser that speaks a different language won’t be able to see the video. That means if you want to host your videos yourself you have to upload not one file but five to cover all your bases: Ogg, WebM, H.264/MPEG-4, VP8, and Flash. This is the only way to cover all your bases and ensure that everyone can view the video regardless of what browser or device they are using.

Why you shouldn’t host videos yourself, part 3: Wireless data is expensive

Serving up a 300MB HD video file to a desktop computer with a broadband internet connection is no big deal. Serving up a 300MB video file to a smartphone is a disaster waiting to happen. Never mind that it’ll take forever to load and that the video format is wrong for the size of screen, but many smartphone data plans are only 500MB or 1GB, so downloading that file just 3 times could put the visitor over her monthly limit. Professional video hosting services like YouTube have systems in place to ensure that smartphones receive videos optimized for smartphones that don’t fry data plans. Doing the same with your self hosted videos is pretty much impossible.

The Solution: Use a professional video hosting service

I bet that right about now you are asking yourself “OK, so if I can’t host the videos on my own server, what am I supposed to do?” The answer is simple: Don’t reinvent the wheel. The problems above, and a myriad of others I didn’t mention, have been solved, and solve well, by several different companies over the years. And it would behoove you to take advantage of their expertise.

With the sudden popularity of online video, largely spurred on by YouTube, entrepreneurs came out of the woodworks to offer up alternatives with more control and less spam. These alternatives have now matured and deliver professional grade services at acceptable prices. And because of the popularity of WordPress, most of these services integrate seamlessly with the platform giving you all the control you need while at the same time staying clear of the YouTube trolls.

There are many services out there offering different types of services for different purposes so you need to do your research and figure out a) what you need and b) who provides those services at a price point you are comfortable with. (And yes, you have to pay for these services, but they are not all that expensive.) My recommended (but not exhaustive) list includes, in no particular order, VideoPress (by Automattic), Viddler, BrightCove, and Kaltura. All these services will provide you with secure video hosting that works the way your users will expect across all platforms and devices without server lag and other bandwidth issues.

Using videos in WordPress

How you use your videos in WordPress depends on the service you end up selecting. Some, like VideoPress, integrate seamlessly into WordPress with a plugin and all the work is done from within the CMS. Others, like BrightCove, have their own custom user interface and you embed the videos into your site by copying and pasting code. You can also use independent plugins like VideoJS to place hosted videos in your site. It’s really up to you.

But what about Amazon S3 / Azure / The Cloud?

You’ve probably seen people talk about video hosting on a cloud service like Amazon S3, Azure, or the likes. And yes, that can be done, and you can even overcome the issues raised above by using a service like ZenCoder to encode your video files to be served up to every possible browser and device. But the reality is this combination will be more complicated and cumbersome and probably more expensive than just using a professional video hosting service. It’s a question of simplicity and reliability.

If you don’t want to break the bank, just go with VideoPress at $59.97 / year and you’ll have all the frustration free video hosting you need. Or you can go with one of the other services for enhanced functionality. Just don’t waste your time on self hosted videos. It is not worth it.

Android Browsers video

Testing the new Vimeo Universal Player

On Tuesday Vimeo released their new Universal Player in an attempt to serve up videos to the ever changing landscape of web enabled devices (ie. iPhones, Androids and iPads etc). As we all know video on these small devices has been a bit of a struggle, especially with Apple flat out refusing to support Flash of any sort. Vimeo, like YouTube, is now turning to HTML5 video to try to combat this issue.

The new Universal Player uses an iFrame along with some fancy code to serve up the appropriate type of video file to different devices and browsers.

UPDATE 2: It works… ish

I’m getting sporadic reports of everything from “it works, what the hell are you on about” to “I can’t see the iFrame”. It seems that the videos (from a Plus account with Mobile version activated) works properly on iPad, iPhone 3GS and 4 as well as Android devices running 2.2 (Froyo). On my Rogers HTC Magic which still runs 1.5 due to Rogers’ complete disregard for customer satisfaction it does not work. In the native browser the video still shows up with buttons but nothing happens when you click the buttons. In Opera Mini the iFrame doesn’t even show up. It looks like growing pains and one could argue that backwards copatibility to smartphone firmware which was obsolete a year ago is a bit excessive, but then people with Android devices have very little choice when it comes to their carriers refusing to roll out updates. Until I hear otherwise I’m going to write Vimeo videos not working on Android 1.5 down to outdated firmware and put it on the long list of reasons why Rogers needs to get their act together.

UPDATE: Plus users only (and you have to activate the feature)

A bit more digging lead me to this page where I found that the new Universal Player is only universal for Plus users. If you have a regular old non-paid account your videos won’t play on mobile devices. What’s more, to get the feature to work you have to first activate Mobile Versions in your account. I tried doing this through my web browser but the feature was nowhere to be found. When I logged in using my phone and went to My Videos there was a huge button to activate Mobile Version. I’ve now clicked the button and it says “Mobile versions of your videos are being made right now. Check back here later!” No idea how long the conversion will take.

The good news is that once Mobile Versions has been activated it automatically applies to all future videos uploaded as well. The bad news is, like I said, that it only applies to Plus users. The Q&A on the blog post indicates that the feature might be released to everyone some time in the future so I’ll keep my fingers crossed.

Stay tuned for another update once the videos have been converted properly.

But does it actually work?

I’m working on a large project with a lot of video integration and we needed to find a solution so that the videos would show up on the iPad and iPhone in particular. In the old days (3 days ago), Vimeo videos didn’t work on these devices but the new Universal Player looked to solve these problems. Or rather, it solved the problem for the iPad. On the iPhone (and Android for that matter) it doesn’t work and causes some weird effects (if you have one of these devices you can take a look for yourself by opening this post and playing the video above):

The video iframe is severely cropped vertically and does not play. No matter what I do. And no, it’s not a matter of bad code or an uncompliant server. I’ve tested this on 5 different servers, in different sites, and with different configurations. The videos do not play in the native iPhone browser nor in the native Android browser or Opera Mini on Android. All I get is the cropped (and very wide) frame with the video thumbnail and a play button.

I want this to work, but as of right now, at least as far as I can tell, it doesn’t. If you have a different experience, please drop a line in the comments.

services video

Motion Graphics for VJ I Am TV – The other part of our business

People are often surprised to learn that web design is only one part of a large portfolio of services provided by my company Pink & Yellow Media. We also provide extensive services for broadcast television. These include small scale production as well as still and motion graphics.

Over the years we have provided graphics and other post-production services for numerous TV shows and most recently a new US syndicated show called VJ I Am TV. Just to provide a sample of our services, here is the intro we created for this show based on their logo. It was made entirely in Adobe After Effects and Photoshop and utilizes still frames in a mock 3D environment to create a pop-up effect that is both engaging and modern.

The music was created by Skratch Bastid after the intro was created and it merges well with the visuals to create an overall feel of youth and vibrancy.

You can catch VJ I Am TV on numerous American networks (I don’t have the air schedules handy) and interact with them through their website. The show is part of the larger IAM network which is a video based local social networking service that includes VancouverIAM.