Guide to HTML, CSS, and JavaScript (University at Buffalo Version)

Chapter 9: Creating a Multimedia Web Site

It is becoming more prevalent to use multimedia on web pages. HTML5 provides new tags to make this task easier.

The `<audio>` Tag

The <audio> tag allows you to provide a way for uses to control when and how they listen to sound.

<audio controls>
<source src="ClosingCredits.mp3" type="audio/mpeg">
Sorry, your browser does not support the audio element.
</audio>

Figure 9-1: The <audio> Tag

The `<video>` Tag

The <video> tag allows you to provide a way for uses to control when and how they view the video.

<video controls style="width: 360px; height: 180px;">
<source src="Ryan Bald for Bucks.mp4" type="audio/mpeg">
Sorry, your browser does not support the video element.
</video>

Figure 9-2: The <video> Tag

The `<iframe>` Tag

You could also use the <iframe> tag to create an area on your web page to display a remote video, such as a YouTube video.

<p>Use and iframe to display a YouTube video.</p>
<iframe width="320" height="240" src="https://www.youtube.com/embed/2sh4BIaF6gg"
frameborder ="0" allowfullscreen></iframe>

Figure 9-3: The <iframe> Tag

The `<canvas>` Tag

The <canvas> tag allows you to define a section of your web page that will be used to "draw" text or figures.

  <canvas id="myCanvas" style="border: 1px solid #000; width: 200px; height: 80px">
    Your browser does not support the HTML5 canvas tag.
  </canvas>
  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.strokeText("Hello World",10,60);
  </script>

Figure 9-4: The <canvas> Tag

Here is what is displayed.

Figure 9-5: The <canvas> Output

Task - Create a Multimedia Web Site

For this task you will create a new web site of four (4) pages just as you did in previous tasks. This new web site should open up a new web page that utilizes hypertext links to allow users to visit your three (3) additional web pages (audio, video, and animation).

Use your CSS files to control the look and feel of each page.
Create one (1) page that uses an <a> tag to link to a sound clip and an <audio> tag to provide controls for playing a sound clip.
Create one (1) page that uses an <a> tag to link to a video clip and a <video> tag to provide controls for playing a video clip and an <iframe>tag to play a remote-hosted video (for example, YouTube).
Create one (1) page that uses JavaScript to display a scrolling or animated text string using the <canvas> tag.
The sounds and audio clips can be either uploaded to your web server account or you can link to clips that exist somewhere on the internet as long as you respect copyright laws and the clips are ethical and moral.
The JavaScript can be from any of the free JavaScript web sites or one you create yourself.