Presentation on theme: "MTA EXAM 98-375 HTML5 Application Development Fundamentals."— Presentation transcript:
MTA EXAM HTML5 Application Development Fundamentals
98-375: OBJECTIVE 2 Build the User Interface by Using HTML5
Choose and configure HTML5 tags to play media LESSON 2.3
In this lesson, you will review the following: Video and audio tags OVERVIEW Lesson 2.3
What are the advantages and disadvantages of using the new and tags available in HTML5? What types of controls are available for audio and video? What file types are recommended for audio and video? GUIDING QUESTIONS Lesson 2.3
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.
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.
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 and tags for browsers that do not support the element.
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
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?
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.“
REVIEW Lesson 2.3 Can you answer these? What are the advantages and disadvantages of using the new and tags available in HTML5? What types of controls are available for audio and video? What file types are recommended for audio and video?
ADDITIONAL RESOURCES Lesson 2.3 MSDN Resources HTML5 Audio and Videohttp://msdn.microsoft.com/en- us/library/gg589509(v=VS.85).aspx Internet Explorer 9 Guide for Developers us/ie/hh410106#_HTML5_video_audio Other Resources W3C Audio Element Definitionhttp://www.w3.org/TR/html5/the-iframe- element.html#the-audio-element W3C Video Element Definitionhttp://www.w3.org/TR/html5/the-iframe- element.html#the-video-element HTML5 Tutorialhttp://www.w3schools.com/html5/default.a sp Lubbers, Peter; Albers, Brian; Smith, Ric; Salim, Frank ( ). Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development (Kindle Location 161). Apress. Kindle Edition.