That Modernizr helps to detect whether the browser supports CSS3 or HTML5 features. Now here we create a Web page named modernizruse.html to see how to use Modernizer JavaScript library.
//// modernizruse.html file////
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Use of the Modernizr in HTML5</title>
<SCRIPT src="modernizr-1.6.min.js"></SCRIPT>
</head>
<body>
<div id="music">
<AUDIO>
<SOURCE src="audio.mp3">
</AUDIO>
<BUTTON id="play">Play</BUTTON>
<BUTTON id="pause">Pause</BUTTON>
</div>
<SCRIPT>
if(Modernizr.audio){
alert("Your Browser supports audio.");
}else{
alert("Your Browser does not support audio.");
}
</SCRIPT>
</body>
</html>
A Web page is created to use the AUDIO element of HTML5. The reference of Modernizr JavaScript library is provided in the SCRIPT element of the HEAD element. Then a condition is applied to check whether or not the AUDIO element is supported by the browser.
When you open the modernizruse.html file in the Google Chrome browser then it show an alert message box for supporting AUDIO element.
//// modernizruse.html file////
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Use of the Modernizr in HTML5</title>
<SCRIPT src="modernizr-1.6.min.js"></SCRIPT>
</head>
<body>
<div id="music">
<AUDIO>
<SOURCE src="audio.mp3">
</AUDIO>
<BUTTON id="play">Play</BUTTON>
<BUTTON id="pause">Pause</BUTTON>
</div>
<SCRIPT>
if(Modernizr.audio){
alert("Your Browser supports audio.");
}else{
alert("Your Browser does not support audio.");
}
</SCRIPT>
</body>
</html>
A Web page is created to use the AUDIO element of HTML5. The reference of Modernizr JavaScript library is provided in the SCRIPT element of the HEAD element. Then a condition is applied to check whether or not the AUDIO element is supported by the browser.
When you open the modernizruse.html file in the Google Chrome browser then it show an alert message box for supporting AUDIO element.
No comments:
Post a Comment