HTML5 Video First

Video is an integral part of Kickstarter, and ever since our launch, we’ve depended on Adobe’s Flash to serve videos in a proprietary player. Today, thanks to HTML5’s <video> tag, that changes.

Previously we had been serving our project videos to desktop machines using Flash. If Flash was not detected, our players would fall back to a HTML5 <video> element. 

Starting now, however, we are inverting this logic and will only serve Flash videos if users' browsers are so old they don't support the <video> tag (including some versions of Firefox that don't support h.264).

Why

Most mobile devices do not support Flash. It’s simpler to use the exact same software on both the desktop and mobile.

Some computers do not ship with Flash. We don’t want to require users to install software to use our website. We still use Flash for other features (users have to use it to upload media), and we will work to remove those Flash requirements.

We have never had an in-house Flash developer, because while our video player is important, most of the client-side code is written in JavaScript. Every time we have wanted to redesign our Flash player or add a new feature we have had to ask an outside consultant, which took time and made quick turnarounds difficult.

Flash is insecure. Due to ExternalInterface.call, it’s extremely easy to accidentally allow the execution of Javascript sent via a param.

How

For a couple weeks now, we’ve been building up our own HTML5 player. We started serving our new player to people who didn’t have Flash installed, which allowed us to work out the UX and bugs with a small set of users. A few days ago, we enabled the HTML5 player for employees of Kickstarter, widening the user base even more.

We haven’t found the need to use a larger library because the video element specification is so clear and simple to use. Our designers are very skilled in CSS, and we used those skills to design the look and feel of the video player. It is a pleasure to use our core abilities on something that is so core to our site.

Who

Design by Zack Sears and Brent Jackson.

Interaction by Samuel Cole.

Comments

    1. Fb_profile_picture.small

      Creator Ingo Hoffmann on September 12, 2013

      This is great news, but why not WebM as well?

    2. Heart.small

      Creator Samuel Cole on September 12, 2013

      We have been encoding WebM for new projects for a couple months now.

    3. Avatar.small

      Creator John Drinkwater on September 12, 2013

      My Firefox doesn’t support h.264 and likely wont for the near future ‐ is WebM going to be enabled soon?

    4. Fb_profile_picture.small

      Creator Bo Jeanes on September 12, 2013

      John, actually Firefox does support it now if the OS has the codec (see https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats#Browser_compatibility)

    5. Were-shepard.small

      Creator MH on September 12, 2013

      Volume Control would be nice. Sound on/off is a tad too rudimentary for my taste ;)

      Otherwise it works fine, though. Good job.

    6. Avatar.small

      Creator unitzer07 on December 11

      Yeah seriously, I don't want to have to adjust the main computer volume just because kickstarter's videos are blasting in my headphones.