452 CHAPTER 11 HTML5 supports multimedia
C. onplay
D. onloadeddataPractice exercises
If you encounter a problem completing any of these exercises, the completed projects can be
installed from the Practice Exercises folder that is provided with the companion content.Exercise 1: Create a webpage that displays video
In this exercise, you apply your knowledge of the <video> element by creating a web applica-
tion that displays video.
At Contoso Ltd., you have been asked to create a prototype webpage that displays video
using the <video> element. The webpage needs to display video to the Firefox, Internet
Explorer, and Chrome browsers at a minimum, but you want to reach as many browsers as
possible.
You know that you need to convert your .mp4 file to other formats, but you also want to
identify the file type the browser used so you can determine the file types that provide the
most browser coverage.- Start Visual Studio Express 2012 for Web. Create an ASP.NET Empty Web Application
project and name it MultimediaPrototype. - Add a new folder, Media, to the project.
- Add the Eagle video files. Right-click the Media folder, choose Add, and select Existing
Item. Locate the Resource folder and select the three Eagle video files. - Add an HTML file to the project. Name it VideoPage.html.
- Add a CSS file to the project. Name it default.css.
- Add a new folder, Scripts, to the project.
- Right-click the Scripts folder and add a new JavaScript default.js file.
- Add a reference to the jQuery library by right-clicking the project node; choose
Manage NuGet Packages. Click Online and type jQuery in the search criteria. When
the jQuery library displays, click the Install button. - In the VideoPage.html file, add a reference to the default.css, jQuery library, and
default.js files. - Title your page Video Prototype.
Your HTML page should look like the following.
<!DOCTYPE html>
Video Prototype