Our HTML5 player

The Uppod runet player has an HTML5 version.



Our designer of players uses many respected projects, so we decided to make the choice of technology. The HTML5 version will be as compatible as possible with the current settings of the Flash version that we have been developing for several years. And maybe superior to her, who knows. So far, only basic functionality has been implemented without styles and playlists. The beta version of the player can be viewed on html5player.ru , but here you can download the player and try it out.

Development

We tried several editors, but ironically, FlashDevelop was the best choice - a free and very convenient code editor. Recommended for JavaScript too. It works faster than with ActionScript - no compilation is needed, and the native CSS and DOM relationship makes it a lot easier.

Frameworks (jQuery, etc.) were not used, so uppod.js does not require any libraries to work. A compressed file weighs about 27kB.

All interface graphics were drawn in canvas to resemble the Flash version, where you can create your own buttons - they are also drawn programmatically. FireFox is a bit obscure with the graphics, everything is fine with the rest of the browsers.

An unexpected problem was animation on top of the video to indicate a buffer - distortion and artifacts appeared at the edges. Therefore, the indication had to be done ascetically with an inscription above the timeline.

Zoo

The player works in all browsers that have HTML5 support.

Video	Browsers
H.264 (MP4), AAC	Safari 3.0+ Chrome 5.0+ iOS 3.0+ Android 2.0+ IE 9.0+
Theora (OGG), Vorbis	FireFox 3.5+ Chrome 5.0+ Opera 10.5+
VP8 (WebM), Vorbis	IE 9.0+ FireFox 4.0+ Chrome 6.0+ Opera 10.6+

Audio	Browsers
MPEG (MP3)	Safari 4.0+ iOS 3.0+ Chrome 3.0+
Theora (OGG), Vorbis	FireFox 3.5+ Chrome 3.0+ Opera 10.5+
Wav	FireFox 3.5+ Safari 4.0+ Opera 10+

The tables show that the worst situation is with IE, which supports HTML5 only in the ninth version, according to the developers (in the last demo there is no canvas or video). But they promise GPU support.

Performance tests showed the leadership of Chrome and Safari. Worst of all, with the load at FireFox, up to the fall. FireFox also has a problem with getting stream loading data - instead of the standard buffered property, a cyclic loaded has been used to this day. This was fixed in 4.04b released yesterday, but only for OGG. Opera has nothing at all, so only the play line is displayed there.

The HTML5 standard offers to check the browser for compatibility with formats and give a file that is supported. You can also get used to it by giving the Flash version to an outdated browser (the player can do this himself).

On iPhone (iOS), the player works like the launch button of the built-in Quicktime - better than nothing.

Interface

This is what distinguishes the player from the video tag. We made the interface as similar as possible to our standard Flash version, you may not recognize it at first glance. We added full-screen mode to the entire browser window (+ F11), the main hot keys, the control panel automatically hides during playback. In the future, all functionality will be fully cloned, including styles, playlists and modules (subtitles, ads, etc.). As for flexibility in the details, Flash, due to its long history, looks better.

Import

The standard for importing to blogs is likely to be an iframe, where you can display HTML5 and Flash and ads. The only question is how quickly the engines of blogs and social networks will be ready for this.

Total

We didn’t find anything new, so we’ll repeat the well-known facts:

It’s nice to work with HTML5, standard, performance is better in some places, it works on devices without Flash.

Why HTML5 is bad:
- no cross-browser compatibility;
- no agreement on formats;
- there is no normal support for streams (RTMP, etc.);
- no microphone and webcam support;
- No infrastructure (ad networks, export to blogs, etc.).

It seems that HTML5 is able to replace Flash in the mass segment of the media player market in a few years, if browser manufacturers try and find new technologies for streaming data.

HTML5 Player is free , as is the Flash version of Uppod.

Last news:

• YouTube API support;
• integration with VideoSell, Begun, AdLabs ad networks and AOneBill sms aggregator;
• localization of the interface in any language;
• a bunch of new skinning options;
• folders in playlists;
• and much more.

PS Thanks for the bug reports, we will take everything into account.