Hosting responsive HTML5 video locally

As I set this new site up, I was interested in exploring options for video hosting. When I had originally set up the placeholder videos, I used Vimeo embeds. I love Vimeo and have used it on other sites, but I wanted this site to be faster. The Vimeo embed loads significantly after the page load. I thought I could remedy that by using a poster image in it’s place, while it loads. This worked, but was messier than I’d like and I couldn’t pre-load the video in the background without it auto-playing.

I looked into locally hosted HTML5 video players. There are a lot of them. None of them really matched all my desires. This chart is quick reference to all their features. I was most interested in VideoJS. The only problem was the Flash fallback was not responsive and didn’t work with my design. I hacked it to be responsive, but since I have a box-shadow element on a div surrounding the player, it had to be pixel perfect at all sizes or else it would leave a gap before the shadow.

I eventually settled on SublimeVideo as a temporary solution. Once I had my video really exported well, the load time was unstoppable. The HTML5 poster frame loads immediately, and the video auto-loads in the background as the visitor is reading the page.

I only had to hack it a little bit to get my container box-shadow to work well. It’s not perfect, but I know what I want now and I’m keeping my eye out now for the perfect HTML5 video player.