Archive results for: HTML5

HTML5 Video Playlist Player

Nowadays, there are many HTML5 video players that also support legacy browsers.

One of the more popular video players is jwplayer, which both offers free and commercial versions.  It has tons of features and a great API with detailed documentation.

You can easily modify the default initialization code for a single video player, to add playlist functionality.

Read more ›

SVG Images

SVG (Scalable Vector Graphics) is an image format for vector graphics.

Some of the advantages of using SVG are that they scale to any size without losing any clarity; looks great on retina displays; small file sizes. It offers a resolution-independent technique for presenting graphics on the web.

SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors and more advanced features such as gradients, filters, scripting and animation. Read more ›

JavaScript Tip: async and defer attribute

Two new HTML5 attributes for the <script> element, which are supported by IE10, Chrome, Firefox and Safari, will contribute to improving a web page’s speed:

  • async attribute: Enables developers to indicate that a script file should be loaded asynchronously, run when available, and not block page loading.
  • defer attribute: Allows developers to dictate that a script file is to be run when the DOM is loaded and not to block the page.


Painting with Canvas

Think of HTML5 canvas in the same way you would think of a painter’s canvas: a rectangular area that we can draw upon.

Similar to the painter, we have the ability to draw lines, circles, squares — any shape can be constructed. Further, we can style these shapes, animate them, specify how they should interact with one another, and much more.

Detecting support for canvas is simple: ensure that the getContext method is available:

Or you can use Modernizr:

Read more ›

HTML5 Geolocation

One of the most exciting and challenging changes to the web has come about the proliferation of smart mobile devices, phones and tablets in the past few years.  Where it used to be the case that web access meant being tied to a desk, increasingly it’s just as likely that your website will be viewed on a mobile device as a traditional computer.

This change in usage and consumption heralds a huge opportunity to redefine how we present content; it prompts us to consider the user and their requirements in ways we’ve never needed to before. Nowhere is this more significant than in the growing market for location-aware applications, where content is specifically oriented towards both the user and their current position.

These apps take advantage of a hardware enhancement common to most modern smartphones running software from Apple, Google and Microsoft – the GPS chip. The opportunities this innovation offers aren’t limited to native apps, however; HTML5 offers us the ability to query the user’s location and tailor our web content accordingly.

The geolocation element of HTML5 is made available through an API, accessible with JavaScript. The location isn’t dependent upon the device accessing the page having a GPS chip, so any HTML5-capabile browser with support for the geolocation API will attempt to locate the visitor using available means (including known Wi-Fi networks, Bluetooth, RFID, etc.).


The user has to explicitly choose to share their location through the API before any results are returned to the browser, so typically  a user will see a pop-up inviting them to consent to sharing their location with your website.
Read more ›

Using Modernizr

Modernizr is an open source JavaScript library that feature tests a browser’s capabilities. It “feature tests” the browser to discover whether the browser it is on will support various features of HTML5 and CSS3 and store those results in a JavaScript namespace aptly named Modernizr.

1. Customize Your Download:

You need to customize your download so it will test the features your want. (

Read more ›

History API

Session history is an HTML5 add-on that extends the capabilities of the JavaScript history object. This sounds simple, but the trick is knowing when and why you should use it.

If you’ve never noticed the history object before, don’t be alarmed. Up until now, it’s had very little to offer. In fact, the traditional history object has just one property and three basic methods. The property is length, and it tells you how many entries are
in the browser’s History list (the list of recently visited web pages that the browser maintains as you skip from page to page across the Web). Here’s an example that uses it:

The most useful history method is back(). It lets you send a visitor one step back in the browsing history:

This method has the same effect as if the visitor clicked the browser’s Back button. Similarly, you can use the forward() method to step forward, or the go() method to move a specified number of steps backward or forward. All this adds up to relatively little, unless you want to design your own custom Back and Forward buttons on a web page.

But HTML5 adds a bit more functionality, which can be put to far more ambitious purposes.
Read more ›

Page 1 of 212