HTML5 and Related Technology Video Evaluations

Updated 12/13/2011

Watch The Video Ready To Roll! Proceed With Caution Avoid For Now
HTML5 Audio h w
HTML5 Audio doesn’t quite replace Flash for DRM or streaming solutions, but it is a good alternative for audio clips or music playback, such as on a music review site. There are potential standards in development for HTML5 audio streaming and capture, but they are not widely supported.
HTML5 Video h O
There is no standard on video codec, with each browser supporting different codecs, nor is there a lot of support for DRM or streaming video, although it is possible to wrap video streams. Dynamic delivery is being rolled out for HTML5 enabling different resolutions to be presented based on what formats are available. Javascript libraries supporting annotations and captioning are also in development. While there is an ecosystem of products supporting HTML5 video, they are immature and thus force developers to write their own Javascript to support it. In practice Cantina recommends using HTML5 video first, but falling back to Flash as needed.
Web Storage h w
Web storage is a standard, almost like macro cookies, that allows the local storage of larger amounts of data. Javascript APIs enable local session storage by storing key value pairs and so anything that can be turned into a string can be saved using Web Storage. Google’s implementation of Gmail for mobile is a good example of Web Storage since they are now storing some messages locally on the device. There is robust support for Web Storage across all browsers, so apps can have persistence without using cookies. Generally storage limits are about 5mb.
Web SQL DB h n
Web SQL DB is something of a companion to local storage and works by storing a SQL database within the browser. This standard is winding down and will not be supported in the future. Cantina does not recommend its use for new projects, although it should be around for a little while so existing projects are OK for now.
Indexed DB h O
Indexed DB is a replacement for Web SQL. It is an expansion upon the ideas of Web Storage, which just saves key value pairs. Index DB is more complex, and allows for data that isn’t just strings. While not fully supported yet this will be receiving a lot of support from Google, and Core Web Kit. For anything short term Cantina recommends using Web Storage until its possible to port to Indexed DB.
Data URLs h O
Data URLs are a good way to capture images and files by encoding and embedding them as a Base64 strings within the URLs. One use for this is to transmit an HTML document with all of its images encoded as strings so it’s included in the html itself and doesn’t require more requests to the server. Data URLs are not yet supported cross browser. Another caution when using Data URLs is that when a file is encoded into a Base64 string it ends up using for more memory.
HTML5 Data Attributes h w
HTML5 Data Attributes allow you to add new custom attributes to existing HTML elements. This can be handy allowing you to attach custom properties to an html element. In the context of jQuery Mobile, data attributes are utilized as a way to track the behavioral configuration of html elements. So for example elements can be assigned button behaviors or to transition using a slide up animation. There are some concerns that Data Attributes break the HTML5 model by inserting unexpected elements.
Geolocation h O
This service enables your browser to request the ability to detect your geographical location. This is not widely supported, but is expected to be. While there are some privacy concerns, geolocation enables the development of more robust apps, which use location as a core feature.
Web Workers h O
Until now Javascript has run in a single thread in browser. Web Workers enables Javascript processes to be written using multi-threading. Within Javascript a worker can be started to perform some task asynchronously to the primary thread. Control is limited to browser-controlled processes only. This allows for far more robust and better performing apps to be written in the browser. Web Workers are particularly suited for image processing. This is not fully implemented yet, and there are some cautions around how Web Workers are sand-boxed.
Web Sockets h n
Web sockets provide a persistent connection from the browser to the server for real-time updates. This is not yet fully supported, so Cantina recommends holding off until support is more widespread.
Server-Sent Events h O
Server-Sent Events are essentially a light version of web sockets. Servers can publish URLs that the browser can subscribe to. Every time the server generates an update the browser receives it and fires an event. This is a good service to use for broadcasting events such as notifications without putting undo strain on the server. While it is a persistent connection it is only one-way communication. While this is not fully supported Cantina suggests that it can be used with caution.
Canvas (2D) h w
Canvas 2D is a drawing API for HTML5 to draw 2D elements and is generally used for games and simple animations. This replaces a number of features from Flash, but does not support time lines or sprites. Video and audio use different HTML5 features.
Canvas (3D/WebGL) h n
WebGL is essentially a web friendly version of the 3D rendering standard OpenGL. Canvas has a 3D context that allows you to use WebGL. This is an emerging standard for HTML5 and is not well supported yet.
SVG h w
SVG is a vector drawing standard that competes with Canvas. In some situations SVG can be faster than Canvas. SVG works very well for drawing and charting but may not be as favorable a solution as Canvas 2D for animation.
SVG Filters h n
SVG Filters are similar to Photoshop filters that can be applied on top of SVG, such as specular highlights. These are not supported by IE, and so should probably be avoided.
CSS3 Animations h O
CSS Animations allow you to perform animations with HTML elements using CSS notation. This is a proposed standard and is not well supported so far. While its probably something that you don’t want to use in day to day production applications you can end up using it in a progressive enhancement way. If CSS3 Animations are available they can be used but if not will end up falling back to Javascript solutions.
CSS3 Multiple Backgrounds h w
This enables multiple images to be defined in a CSS background tag. This allows for the ability to use multiple images as layers to create a deeper look and feel. CSS3 Multiple Backgrounds are progressive by design so the first image will be the default image show if a browser can’t support the feature. In most cases though this is well supported by all browsers.
CSS3 Transitions h O
Transitions are used to provide visual interest when changing from one page to another. This allows you to use effects like page turns or the page sliding off the screen when navigating to another. CSS3 Animations are used when animating individual elements on the page whereas CSS3 Transitions are used with entire pages themselves. This standard is still in development and so should be used with caution.
Creative Commons License HTML5 and Friends by Cantina Consulting is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Based on a work at cantina.co.