Section Text
Meter:
Progress Bar:
| HTML5 Browser Test |
| If you move the mouse on the right side and a gradient box is drawn your Browser supports the HTML5 canvas method. Move mouse out to clear. |
| If you move the mouse on the right side and text is drawn your Browser supports the HTML5 canvastext method. You can tell that the characters are actually drawn because they are overlapping. Move mouse out to clear. |
| If you see a player window on the right and can play the file back your Browser supports the HTML5 video method and plays MP4. |
| If you see a player window on the right and can play the file back your Browser supports the HTML5 video method and plays OGV. |
| If you see a player window on the right and can play the file back your Browser supports the HTML5 video method and plays WebM. |
|
Supported Video MIME types The supported types are checked dynamically when the page is loaded. |
Video supports the following MIME types:
|
| If you see a player window on the right and can play the file back your Browser supports the HTML5 audio method and plays MP3. |
| If you see a player window on the right and can play the file back your Browser supports the HTML5 audio method and plays OGG. |
|
Supported Audio MIME types The supported types are checked dynamically when the page is loaded. |
Audio supports the following MIME types:
|
Here's a summary of what Browser supports what:
| Browser | canvas | canvastext | video MP4 | video OGV | video WebM |
| IE (v8) | no | no | no | no | no |
| IE (v9) | yes | yes | yes | no | no |
| Firefox(v3.6.15 and v4.0) | yes | yes | no | yes | no |
| Safari (v5.0.4) | yes | yes | yes | no | no |
| Opera (v11.x) | yes | yes | no | yes | yes |
As expected IE v8 is not supporting anything.
IE v9 is performing much better.
For video content MP4 or OGV seems to be a good choice. But there's no file format that all common browsers are supporting. So a browser switch is still mandatory.
Remark: One strange behavior was seen with Firefox. After reloading the page (F5 or Ctrl+R) the video would not play anymore. Only closing and reopening the page would fix that.
This problem seems to be fixed - it's not occurring in Firefox 3.6.15 any more.
| CSS3 Browser Test |
|
This is a small test with some new features of CSS3. The upper part is rendered by the Browser. The lower part is a picture of how it actually should look like. Unfortunately Opera is the only Browser that renders it correctly. Firefox and now IE v9 are close (IE v8 is not supporting anything); Safari is misinterpreting the bars completely. |
|
Picture of the properly rendered CSS3 content: It shows round edges and a shadow with 0.5 Opacity. The content is text, a meter and a progress-bar. |
|
