1. HTML5 Application Development Fundamentals
MTA Exam
HTML5 Application Development Fundamentals

2. Build the User Interface by Using HTML5
98-375: OBJECTIVE 2
Build the User Interface by Using HTML5

3. LESSON 2.3
Choose and configure HTML5 tags to play media

4. overview Lesson 2.3 In this lesson, you will review the following:
Video and audio tags
The <audio> tag defines sound, such as music or other audio streams.
The <video> tag specifies video, such as a movie clip or other video streams.
Essentially, the video and audio elements enable embedding of video and audio content into an HTML page without requiring an add-on or external player.

5. GUIDING questions Lesson 2.3
What are the advantages and disadvantages of using the new <audio> and <video> tags available in HTML5?
What types of controls are available for audio and video?
What file types are recommended for audio and video?
Advantages: semantic tag, vendor independent (no plug-ins required), elements are part of the DOM giving you more control with scripts and CSS. Disadvantages: Not supported by all browsers (requires IE9 or higher), this makes it necessary to have several encoded versions available
Controls for audio and video are very similar, they both include native code and JavaScript commands. For example, native commands such as boolean values: autoplay/loop, other values: preload, metadata, and none can be added directly to the tag, ie: <audio controls preload>. JavaScript can be used for more control, such as canplaytype(type), currentTime, duration, play(), and pause().
Browser support for audio and video varies, but most browsers support .aac, .mp3, and .wav audio files; and .mp4 (H.264), .ogg, and WebM video files. Note: iOS ONLY supports H.264 which is propriety codec software.

6. Lecture Lesson 2.3 Benefits of Using Audio and Video Tags
Semantic tags make it easier for search engines (rather than generic object tags).
Not vendor-specific.
No additional plug-ins or software are required.
These elements are part of the Document Object Model (DOM), which provides more control over them through scripting and Cascading Style Sheets (CSS).
They make it easier to add video and audio to a web page.
Remind students that sematic tags provide a user name that is easily recognized vs. the prior generic <object> tag name.

7. Lecture Lesson 2.3 Drawbacks of Using Audio and Video Tags
Not supported by Internet Explorer® 8 and earlier.
Lack of common codec support.
Video must be produced in at least two or three formats.
Currently supports .mp4 (or H.264) .ogg/Theora, WebM video types.
iOS only supports H.264.
Streaming audio and video is not supported.
H.264 files have the .mp4 extension
The codec for creating these files is propriety and has associated costs.

8. Lecture Lesson 2.3 Using Audio
With HTML5, you can add a music player to a web page without requiring a third-party plug-in or add-on.
Tags specify the sound or audio content, such as music or effects, to be played in a document.
The control attribute adds audio controls, such as play, pause, and volume.
It is a good practice to add text content between the <audio> and </audio> tags for browsers that do not support the <audio> element.

9. Lecture Lesson 2.3 Using Video
Video files contain audio tracks, video tracks, and additional metadata that are combined at run time to play the video.
Coders/decoders are algorithms used to encode and decode both audio and video. Raw files are huge and too large to travel across the Internet.
The video tag requires a height and width attribute.
The controls attribute is a Boolean attribute that specifies that video controls should be displayed.
Controls include:
Play, pause, seeking, volume, fullscreen toggle, captions/subtitles, track
JavaScript is used for more control over the playback of audio and video.

10. DEMONSTRATION Lesson 2.3 JavaScript Control for Audio Files
In this demonstration, you will see how to:
Include an audio tag in HTML5.
Add a button to allow the user to restart the audio.
Add a second button that skips the first 30 seconds.
Use the instructions in the teacher guide: ENU-2.3-TG
Discuss other uses of the JavaScript controls for both audio and video.
1. The lesson demonstration requires either Expression Web or NotePad to create an HTML5 document.
2. The demonstration shows the students how to use the new <audio> HTML5 tag.
3. Unzip the resources file to access to the BuffaloChickenDip.mp3 file (a recording with directions to make a snack dip). Alternately, use a different mp3 file or create one.
4. Copy the following code into your html page:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio Example</title>
<script type="text/javascript">
function playAt(seconds){
var audio = document.getElementsByTagName("audio")[0];
audio.currentTime=seconds;
audio.play(); }
function restart(){
audio.currentTime=0;
</script>
</head>
<body>
<audio controls="controls">
<source src="BuffaloChickenDip.mp3" />
Your browser does not support the audio element.
</audio>
<br />
<button title="Play at 15 seconds" onclick="playAt(4.5);" >4.5 Seconds</button>
<button title="Restart Audio" onclick="restart();">Restart</button>
</body>
</html>
When you preview the page in a browser, discuss the possible uses of these new tags and the associated controls.

11. DISCUSSION Lesson 2.3 Audio and Video Compression
Why is it necessary to compress audio and video for playback in a web browser?
What does compression do?
The simple answer is that the files are too large to upload quickly enough to the client machine.
Also include a discussion about preloading the files to help reduce response time.
data compression: a means of reducing the amount of space or bandwidth needed to store or transmit a block of data, used in data communications, facsimile transmission, file storage and transfer, and CD-ROM publishing.

12. In-Class Activity Lesson 2.3
Directions:
Search the HTML5 sites for a definition of the video tag poster attribute.
Create a one-page website for Margie’s Travel.
Add an HTML5 page that uses a poster to introduce a video on a “how to” topic, such as “How to say Hello in French.“
Provide students with the resources at the end of the presentation for the in-class activity
If possible, use a video camera to enable the students to record a short video to say “hello” in French. They can use this video for their in-class activity (A camera that outputs an .mp4 file is convenient.)
If a video camera is not available, make available a suitable video clip for student use in this activity.
The students should also create an image to be shown while the video is downloading or until the user hits the play button (students should use the poster attribute <video poster=“url”>
The owner of Margie’s Travel is offering a special price on a cruise to the Caribbean Islands. One of the islands is Guadeloupe where French is the dominant spoken language.
In order for her travelers to learn some of the local dialect, she has asked her web designer to add some short audio and video clips to the site. The clips are designed for tourists with little or no French speaking ability. To maximize the clips as learning tools, the audio files must have controls for the user to stop, start, and repeat.
Content:
1. Create a simple one-page sample website for Margie’s Travel.
2. Record a short video clip on how to say “Hello” in French.
3. Use the new <video> tags in HTML5 to add this video to a website.
For example:
<video width="320" height="240" controls="controls"> <source src="travelVideo1.mp4" type="video/mp4" /> <source src="travelVideo1.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
4. Review the new controls available with the <video> tag. How do they make the site more user-friendly?
The controls will allow the user start, stop, and pause the audio/video.
5. Create an image (use Expression Design) to introduce the video. Add this image as the poster attribute for the video.
<video width="320" height="240" controls="controls" poster = “FrenchLesson1.png”> Remind students to create an image the same size as the video window.
6. Margie also wants the duration of the files displayed. Update the site to include the duration of each audio and video file added.
The developer can obtain the ‘duration’ of the audio/video and display this value on the screen with JavaScript.

13. REVIEW Lesson 2.3 Can you answer these?
What are the advantages and disadvantages of using the new <audio> and <video> tags available in HTML5?
What types of controls are available for audio and video?
What file types are recommended for audio and video?
Advantages: semantic tag, vendor independent (no plug-ins required), elements are part of the DOM giving you more control with scripts and CSS. Disadvantages: Not supported by all browsers (requires IE9 or higher), this makes it necessary to have several encoded versions available
Controls for audio and video are very similar, they both include native code and JavaScript commands. For example, native commands such as boolean values: autoplay/loop, other values: preload, metadata, and none can be added directly to the tag, ie: <audio controls preload>. JavaScript can be used for more control, such as canplaytype(type), currentTime, duration, play(), and pause().
Browser support for audio and video varies, but most browsers support .aac, .mp3, and .wav audio files; and .mp4 (H.264), .ogg, and WebM video files. Note: iOS ONLY supports H.264 which is propriety codec software.

14. ADDITIONAL RESOURCES Lesson 2.3
MSDN Resources
HTML5 Audio and Video
Internet Explorer 9 Guide for Developers
Other Resources
W3C Audio Element Definition
W3C Video Element Definition
HTML5 Tutorial
Lubbers, Peter; Albers, Brian; Smith, Ric; Salim, Frank ( ). Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development (Kindle Location 161). Apress. Kindle Edition.