Vimeo Spreads the HTML5 Love With Web-Native Video Player

Video sharing site Vimeo has taken the HTML5 plunge one step further with a brand new “universal” embeddable player aimed at mobile devices like the iPhone or the iPad.

Vimeo’s new “Universal Player” is actually capable of serving several different kinds of video formats, but it uses a script to check the browser’s video capabilities. Depending on what the browser can handle, Vimeo may display an HTML5 player, a Flash player or a platform-native player. For users, the playback experience and user interface are the same, regardless of the player being used.

The new embed code, now the default throughout the whole Vimeo site, still serves Flash to desktop browsers, reserving the native options for iPad and iPhone users. But eventually, Vimeo plans to let desktop users in on the HTML5 fun — including perhaps serving WebM videos to Firefox, Chrome and Opera users.

So, if you’re reading this post on an iPad or an iPhone, this movie will launch in a native player wrapped inside the browser’s skin:

WORDS from Everynone on Vimeo.

Interest in HTML5 video is reaching a fever pitch. It’s being fueled mostly by the iPad and other mobile browsing devices that can’t play Flash. Also, the recent launch of the new WebM video format, and the HTML5 video capabilities being built into the latest browser releases have publishers and video services exploring non-Flash alternatives for their viewers.

Vimeo’s new player builds on the HTML5 video player the company first launched as a beta project back in January. But the rapid growth of HTML5 video on the web has urged Vimeo to push this new player to the fore. Other video sites, most notably YouTube, have also launched their own site-wide non-Flash experiences in the last few months. But in most cases the only way to use the native web video players is to visit the actual website. Vimeo is the first to offer an embeddable native player by default.

Despite the new browser sniffing code that lurks behind the new embedding methods, we didn’t notice any significant speed difference from the old code, though of course on mobile devices restricted bandwidth and does make for somewhat choppier video playback.

If you’d like to start using the new player, just head over to Vimeo and grab some embed code and drop into your site. Visit the page with a mobile device and you’ll see the new player.

If you’ve got older Vimeo embed code on your site you’ll need to upgrade it, but fortunately Vimeo is offering a handy JavaScript tool that can do the upgrade with a single click. See the Vimeo blog post for more details. For those of you who don’t want to bother with upgrading old code, fear not, the old code will continue to work just fine. It will just serve up the Vimeo Flash Player.

Indeed there are several reasons you might not want to use Vimeo’s new code, the most troublesome being that it uses an HTML iframe to load the player. Since many popular publishing platforms and social networks don’t allow iframes, you may want to stick with the older code. The new player also got off to a bumpy start, some videos we tested worked just fine on our iPhone, others threw various errors. Thankfully, most of the bugs appear to have been solved since the initial announcement Tuesday.

If you’ve been wanting to take advantage of HTML5 video, but still want the ease of uploading that comes from using a video sharing service, Vimeo is currently your best bet. Look for other services to follow suit in the near future.

See Also: