HTML and CSS Reference
In-Depth Information
Adding
HTML5
features
safely
with
Modernizr
We looked at Modernizr briefly in Chapter 1 , Before We Begin , but we haven't used
it for anything much yet. It is highly recommended that we create a custom build of
Modernizr. HTML5 Boilerplate comes with a custom build of Modernizr that includes
every option available in the custom builder ( modernizr.com/download/ ) includ-
ing extras such as HTML5Shiv, resource loader ( modernizr.load ), media queries
test, and the addition of CSS class names to the html tag based on the test results
from Modernizr.
The custom build of Modernizr enables HTML5 elements in IE (read more about it
at paulirish.com/2011/the-history-of-the-html5-shiv/ ). But, now, with
our audio player, we have the opportunity to use the other Modernizr function that is
available as an extra, that is, modernizr.load .
Audio support in browsers is not as simple as we would expect it to be. Different
browsers expect different formats because of licensing restrictions. Some browsers
do not even support HTML5 audio. It would be perfect to use a framework that ab-
stracts away all these for us. Looking at html5please.com , we see that the recom-
mended suggestion is to use a framework called mediaelement.js to help us deal
with these issues.
Note
html5please.com is a site that tells you which of these new features are avail-
able for use and how they should be used on browsers that do not support them.
Let us use this framework for our audio player only when audio support is not detec-
ted.
First, we download the framework from mediaelementjs.com and copy all the
files from the build folder into js/vendor/mediaelement/ . Then, we shall add the
cross-browser friendly audio markup for our player in index.html , as shown in the
following code snippet:
Search WWH ::




Custom Search