HTML and CSS Reference
In-Depth Information
dataType: “json”,
success: function (results) {
$(“#video”).src = results.d;
error: function (err) {
alert(err.status + “ - “ + err.statusText);
The <script> block shown in Listing 1-7 consists of four parts:
ready() function for the HTML document
• HTML5 audio and video feature detection using Modernizr
• Click event handler for the playaudio button
• Click event handler for the playvideo button
The ready() function is executed when the HTML DOM tree is fully loaded in the browser. It first
checks whether the browser supports HTML5 audio and video features using Modernizr's audio and video
properties (see the code marked in bold). If the browser doesn't support audio or video, an error message
is displayed to the user.
The click event handler for the playaudio button is wired next. It calls GetAudio() using jQuery
$.ajax() (see the bold code inside the event handler). When GetAudio() returns an audio file, the src
property of the <audio> element is set to the returned file name, and its play() method is triggered to play
the audio file. Notice how the return value of GetAudio() is accessed using results.d syntax. If there is an
error while calling GetAudio() , an error message is displayed.
n Note $.ajax() is one of several techniques you can use to call server-side code from HTML pages. You learn
more about $.ajax() and other Ajax techniques offered by jQuery in Chapter 2.
The click event handler for the playvideo button is very similar to that for the playaudio button. The
only difference is that it calls GetVideo() and plays a video file in the <video> element.
Run Default.aspx in IE9, and try clicking both buttons. See if audio and video files are played properly.
n Note The web application also uses a CSS file that takes care of the web form's look and feel. You can get the
complete source code for the project, including the CSS file, from the Chapter 1 code download.
A Simple ASP.NET MVC-Based Web Site Using HTML5
In this section, you develop an ASP.NET MVC application that displays an HTML5 canvas. You can draw a
string on the canvas and then send the string to the server to be saved in a data store.
Search WWH ::

Custom Search