HTML and CSS Reference
In-Depth Information
dataType: “json”,
success: function (results) {
$(“#video”).src = results.d;
$(“#video”).trigger(“play”);
},
error: function (err) {
alert(err.status + “ - “ + err.statusText);
}
})
});
});
</script>
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.
