Our progressively-enhanced video player
10th September, 2014 —
When it came to putting the Indie Tech Summit videos on our site, we wanted to do it right. Videos are very expensive to host, they consume a lot of bandwidth and take up a lot of space. Because of the expense of hosting videos on your own site, and the difficulty in creating video players that work cross-browser and cross-platform, most people host their videos on a third party site. We aimed to do the same. It took a few iterations to get it right, but I’m pleased with the results.
Vimeo and Google
We knew that Youtube was out right away. Google is one of the largest corporate surveillers, and our data, and the the data of those watching our videos, just wouldn't be safe with Google. We want all of the technology and services we use to be as indie as pragmatically possible. First we tried Vimeo. Vimeo has a beautiful, minimal player, and Vimeo Pro is a very affordable platform as it charges a monthly or yearly subscription. However, using Ghostery, we discovered that Vimeo uses Google Analytics on every embedded video, and you can’t take the analytics tracker out. We started looking at alternative platforms.
Wistia is another beautiful platform for hosting videos. We started adding our first few videos to Wistia, and added them to the site. The player was highly customisable, and the plan was fairly affordable for small businesses. There was also a great way to FTP your videos to their site so we didn’t have to wait on HTML uploaders that couldn’t show us the upload progress. However, I didn’t read the fine print, and within a few days we were wondering why our videos weren’t uploading. It turns out we were way over the monthly storage limit and way over the monthly plays limit with over a thousand plays in a couple of days. And we had a big $300 extra bandwidth bill. We knew Wistia wasn’t sustainable for our bootstrapped business as we were giving videos away for free.
Back to Vimeo
I styled our player, and made it responsive using Thierry Koblentz's ‘Intrinsic Ratios for Videos’ to keep the height and width of the video to 16:9. We had a fantastic player. At this point we also started adding transcripts of the videos to each video page for an accessible text-only fallback.
Vimeo Pro is great for hosting .mp4 versions of the videos, however mp4s will only play in Safari, Google Chrome and Internet Explorer. This meant all of the other browsers were getting Flash versions of the videos. But what about people who didn’t use Safari, Chrome or IE, and didn’t have Flash installed? Flash used to be an included and/or often-installed plugin for all browsers. However, with fewer sites and apps needing Flash, fewer people are needing to have Flash installed. And a lot of people don’t have it installed on principle (you shouldn’t need a plugin to access a website, that’s so old-fashioned!) Those people just so happen to be the type of people who would want to visit the ind.ie site and watch the Indie Tech Summit videos.
.ogv and .webm
Without Flash, we needed .ogv and .webm formats for each video to ensure they’d play in Opera and Firefox. Ogg Vorbis (.ogv) is also the only free and unpatented video format, so it’s really the only indie video format. Unfortunately, as Vimeo doesn’t host these formats, we had to store the videos on Amazon S3. Hopefully this won’t become prohibitively expensive, as these videos are a fallback for when Flash isn’t installed in the visitor’s browser.
The rules (shown here in Stylus) that were making our video responsive would hide the native video completely, and add a huge amount of whitespace in its place:
.video-js height 0 padding-bottom 56.25% /* 16:9 */
'js' class, that Modernizr only applies to the
The Stylus looks something like this:
There’s probably some bugs, and please let me know by email or via our Twitter account if you find any. All of the code is visible through the usual web inspector and View Source methods, as it’s all client side. We’re hoping to open up all of our source code soon (once we’ve checked we’ve not accidentally left passwords or rude words anywhere!)