HTML and CSS Reference
In-Depth Information
<article class="t-audio">
<audio controls preload="none" autobuffer>
<sourcesrc="festival.mp3" />
<sourcesrc="festival.ogg" />
</audio>
</article>
Note that we need to specify the stylesheet in the head element to make sure it
works perfectly on all browsers (instead of loading it just in time), as shown in the
following code:
<link rel="stylesheet" href="js/vendor/
mediaelement/mediaelementplayer.css">
We then load the mediaelement.js only when audio support is missing by using
Modernizr in our main.js file, as shown in the following code:
Modernizr.load({
test: Modernizr.audio,
nope: {
'mediaelementjs': 'js/vendor/mediaelement/
mediaelement-and-player.min.js'
},
callback: {
'mediaelementjs': function() {
$('audio').mediaelementplayer();
}
}
});
This code first tests if audio is supported with Modernizr. If it is not supported, then
we load the necessary resources to make the audio work using our mediaele-
ment.js framework. Once mediaelement.js is loaded, we call it, so that it runs
and converts our audio files to a format that browsers which lack audio support will
understand.
Search WWH ::




Custom Search