2. Chapter3-HTML Multimedia.pptx

UCCD 2323: Front-End Web Development Chapter 3 – HTML Multimedia AUDIO-VISUAL IMPLEMENTATION COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ  DEFINITION MULTIMEDIA HTML VIDEO HTML AUDIO Topic outline HTML PLUG-INS...

UCCD 2323: Front-End Web Development Chapter 3 – HTML Multimedia AUDIO-VISUAL IMPLEMENTATION COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ  DEFINITION MULTIMEDIA HTML VIDEO HTML AUDIO Topic outline HTML PLUG-INS HTML OBJECT TAG HTML EMBED TAG MULTIMEDIA ACCESSIBILITY At the end of this lecture, students will be able to: Objective 1. Enhancing the web pages with sound and video in Web Pages. s COPYRIGHT © 2016 PEARSON EDUCATION, INC., HOBOKEN NJ What is Multimedia?  Multimedia comes in many different formats. It can be almost anything you can hear or see.  Examples: Images, music, sound, videos, records, films, animations, and more.  Web pages often contain multimedia elements of different types and formats. Common Video Formats HTML Video - Browser Support HTML Video - Media Types HTML5 Video  The controls attribute adds video controls, like play, pause, and volume.  It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. HTML5 Video  The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.  The text between the and tags will only be displayed in browsers that do not support the element. HTML5 Video Tags HTML5 Video Autoplay  To start a video automatically use the autoplay attribute  loop attribute specifies that the video will start over again, every time it is finished.  M4V (.m4v) is developed by Apple Inc. and it is specifically designed for Apple products such as the iPhone, iTunes store, iPod, etc.  MP4 (.mp4) is developed by Moving Picture Experts Group (MPEG) and it can be played by most media players and devices. It is one of most popular video format streaming on the Internet thanks to its great compression and low-bandwidth requirement. HTML5 Video Optional Attributes Copyright © Pearson, Inc. 2013. All Rights Reserved. Common Audio Formats HTML Audio - Browser Support HTML Audio - Media Types HTML5 Audio HTML5 Audio  The controls attribute adds audio controls, like play, pause, and volume.  The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.  The text between the and tags will only be displayed in browsers that do not support the element. HTML5 Audio Tags Copyright © Pearson, Inc. 2013. All Rights Reserved. HTML5 Audio Attributes Copyright © Pearson, Inc. 2013. All Rights Reserved. HTML Plug-ins  Adobe Flash Player  Adobe Reader  Windows Media Player  Apple Quicktime  Java Applets Plug-ins can be added to web pages with the tag or the tag. HTML Tag  The element is supported by all browsers.  The element defines an embedded object within an HTML document.  It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages. HTML Tag  The element is supported in all major browsers.  The element also defines an embedded object within an HTML document.  Web browsers have supported the element for a long time. However, it has not been a part of the HTML specification before HTML5. HTML Attributes Copyright © Pearson, Inc. 2013. All Rights Reserved. Multimedia Accessibility  Multimedia accessibility ensure that website work is accessible to all, including people with disabilities who cannot hear or see audio. What do you need to make audio and video accessible? Copyright © Pearson, Inc. 2013. All Rights Reserved. Multimedia Accessibility (cont.)  Transcript - required. For most W3C media, such as recordings of teleconferences, you only need to get/make and post a transcript to provide basic accessibility.  Captions - nice to have for most W3C media, required for some. (Captions are essentially the transcript synchronized with the video or audio.) Captions are important when people need to see what's happening in the video and get the audio information in text at the same time Copyright © Pearson, Inc. 2013. All Rights Reserved.