Our HTML5 Player
The Uppod runet player has an HTML5 version.
A lot of reputable projects use our player designer, so we decided to make a choice of technology. The HTML5 version will be as compatible as possible with the current Flash version settings, which we have been developing for several years now. And maybe superior to her, who knows. So far, only the basic functionality without styles and playlists has been implemented. You can look at the β-version of the player on html5player.ru , and here you can download the player and try it out.
We tried several editors, but by a twist of fate, FlashDevelop came up best - a free and very handy code editor. Recommended for javascript. It works faster than with ActionScript - compilations are not needed, and native communication with CSS and DOM simplifies a lot.
')
We did not use frameworks (jQuery, etc.), so uppod.js does not require any libraries to work. The compressed file weighs about 27kb.
All interface graphics were drawn on canvas to resemble the Flash version, where you can create your own buttons — they are also drawn programmatically. FireFox zamylaivaet graphics, with the rest of the browsers everything is fine.
An unexpected problem was the animation over the video to indicate the buffer - distortions and artifacts appeared at the edges. Therefore, the display had to be made ascetic inscription above the timeline.
The player works in all browsers where there is support for HTML5.
From the tables it is clear 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 support for the GPU.
Performance tests showed leadership Chrome and Safari. The worst thing is the load from FireFox, right down to the fall. FireFox also has a problem with getting data on the stream loading - instead of the standard buffered property, a bicycle loaded has been used to this day. This is fixed in 4.04b released yesterday, but only for OGG. Opera has nothing at all, so only the playback line is displayed there.
The HTML5 standard offers to check the browser for compatibility with formats and to give a file that is supported. You can also contrive by giving the Flash version to an outdated browser (the player can do it himself).
On iPhone (iOS), the player works like the Quicktime built-in launch button - better than nothing.
This is what distinguishes the player from the video tag. They made the interface as close as possible to our standard Flash version, you may not recognize it at first glance. Added full-screen mode to the entire browser window (+ F11), the main hot keys, the control panel is automatically hidden during playback. In the future, all functionality will be fully cloned, including styles, playlists and modules (subtitles, advertising, etc.). With regard to flexibility in the details, the Flash at the expense of a long history looks better.
Iframe is likely to become the import standard in blogs, where you can display HTML5 and Flash and ads. The only question is how quickly blogging and social networking engines will be ready for this.
We didn’t find anything new, so let’s 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 support for microphone and webcam;
- no infrastructure (advertising networks, export to blogs, etc.).
It seems that HTML5 is able to replace Flash in the mass segment of the mediapler market for several years, if browser manufacturers try and find new streaming technology.
The HTML5 player is free , as is the Flash version of Uppod.
Latest news:
PS Thanks for the bug reports, we'll take everything into account.
A lot of reputable projects use our player designer, so we decided to make a choice of technology. The HTML5 version will be as compatible as possible with the current Flash version settings, which we have been developing for several years now. And maybe superior to her, who knows. So far, only the basic functionality without styles and playlists has been implemented. You can look at the β-version of the player on html5player.ru , and here you can download the player and try it out.
Development
We tried several editors, but by a twist of fate, FlashDevelop came up best - a free and very handy code editor. Recommended for javascript. It works faster than with ActionScript - compilations are not needed, and native communication with CSS and DOM simplifies a lot.
')
We did not use frameworks (jQuery, etc.), so uppod.js does not require any libraries to work. The compressed file weighs about 27kb.
All interface graphics were drawn on canvas to resemble the Flash version, where you can create your own buttons — they are also drawn programmatically. FireFox zamylaivaet graphics, with the rest of the browsers everything is fine.
An unexpected problem was the animation over the video to indicate the buffer - distortions and artifacts appeared at the edges. Therefore, the display had to be made ascetic inscription above the timeline.
Zoo
The player works in all browsers where there is support for HTML5.
| 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+ |
From the tables it is clear 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 support for the GPU.
Performance tests showed leadership Chrome and Safari. The worst thing is the load from FireFox, right down to the fall. FireFox also has a problem with getting data on the stream loading - instead of the standard buffered property, a bicycle loaded has been used to this day. This is fixed in 4.04b released yesterday, but only for OGG. Opera has nothing at all, so only the playback line is displayed there.
The HTML5 standard offers to check the browser for compatibility with formats and to give a file that is supported. You can also contrive by giving the Flash version to an outdated browser (the player can do it himself).
On iPhone (iOS), the player works like the Quicktime built-in launch button - better than nothing.
Interface
This is what distinguishes the player from the video tag. They made the interface as close as possible to our standard Flash version, you may not recognize it at first glance. Added full-screen mode to the entire browser window (+ F11), the main hot keys, the control panel is automatically hidden during playback. In the future, all functionality will be fully cloned, including styles, playlists and modules (subtitles, advertising, etc.). With regard to flexibility in the details, the Flash at the expense of a long history looks better.
Import
Iframe is likely to become the import standard in blogs, where you can display HTML5 and Flash and ads. The only question is how quickly blogging and social networking engines will be ready for this.
Total
We didn’t find anything new, so let’s 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 support for microphone and webcam;
- no infrastructure (advertising networks, export to blogs, etc.).
It seems that HTML5 is able to replace Flash in the mass segment of the mediapler market for several years, if browser manufacturers try and find new streaming technology.
The HTML5 player is free , as is the Flash version of Uppod.
Latest news:
- YouTube API support;
- integration with VideoSell, Begun, AdLabs ad networks and AOneBill sms-aggregator;
- interface localization to any language;
- a bunch of new options for skins;
- folders in playlists;
- and much more.
PS Thanks for the bug reports, we'll take everything into account.
Source: https://habr.com/ru/post/102576/
All Articles