Using HTML 5.  HTML 5 uses a standard method to embed audio into Web pages.  Prior to HTML 5, browser plug-ins or separate applications such as Windows.

Slides:



Advertisements
Similar presentations
What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
Advertisements

Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets.
Chapter 11 Media and Interactivity Basics Key Concepts
HTML5, OVERVIEW AND NEW FEATURES PowerPoint by Mason O’Mara.
HTML Structure & Web Design Basics
Iframes & Images Using HTML.
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 17: Video, Audio, and Other MultiMedia.
SHAREPOINT PAKISTAN USER GROUP #1 SHAREPOINT COMMUNITY IN PAKISTAN AND ASIA HTML5 and SharePoint 2013.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe.
Video, audio, embed, iframe, HTML Form
3.02 Publishing Animations
INF Web Design Using Multimedia on the Web Video - Part 1.
M ULTIMEDIA ON THE W EB. Multimedia Purpose of Multimedia Multimedia Issues Animation Digital Audio fundamentals Browser Plug-ins Java Applets.
Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss security.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Chapter 15 HTML 5 Video and Audio Intro to HTML5 1.
 Video and Audio Files can be played online just by selecting them  Video are flash files and will not work with Quicktime (Apple) or Windows Media.
Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
AUDIO 101 with Adrian What is an audio file format? An audio file format is a file format for storing digital audio data on a computer system. Universal.
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
Video on the Web. The Evolution of web video formats… WebM (Supported by Google) Ogg (Supported by Theora) Mp4 (h264 video encoding) WebM (Supported by.
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: Multimedia on the Web.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Adding Sound.
Programming Games Show your cannonball. HTML5 video. Miro. Classwork/Homework: Acquire video, convert to multiple formats, and produce simple (just html)
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
XP Tutorial 8New Perspectives on HTML and XHTML, Comprehensive 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial.
Chapter 13-Tools for the World Wide Web. Overview Web servers. Web browsers. Web page makers and site builders. Plug-ins and delivery vehicles. Beyond.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 11 Key Concepts 1 Copyright © Terry Felke-Morris.
MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard
HTML Use of Multimedia on web page. HTML Media Q. How to call Image file in our web page ? A. That is the easy syntax for defining an image. 2.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
HTML5 Audio and Video. Slide 2 History Playing audio and video used to be something of a novelty You would embed a control (with the element) into your.
Multimedia Web Pages. Multimedia displays Browser can load web pages that contains multimedia elements 1. Helper applications: stand-alone programs that.
HTML 5 Tutorial Chapter 3 Video. Video HTML 5.0 provides a standard for showing video. Using the element we can easily embed video within our web page.
Using Plug-Ins Adding Multimedia to an HTML Document.
CHAPTER 15 HTML 5 VIDEO AND AUDIO Intro to HTML5 1.
HTML 5. Introduction In modern browsers, adding a video to your page is as easy as adding an image. No longer do you need to deal with special plug-ins.
Sound and the Web. Transferring sound Download Progressive Download Stream.
Multimedia. What is multimedia? Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films,
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
M ULTIMEDIA ON THE W EB. Multimedia Purpose of Multimedia Multimedia Issues HTML5 and elements CSS Transitions and Animations Animation to avoid.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 11 KEY CONCEPTS 1.
CHAPTER 10 AUDIO AND VIDEO. MEDIA PLAYER API HTML5 contains an API (Application Programming Interface) for controlling audio and video players embedded.
HTML Structure & syntax
Chapter 9 HTML 5 Video and Audio
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Chapter 9 HTML 5 Video and Audio
HOW FLASH WORKS The Flash authoring environment is used to create Flash movies The .fla file is exported to a format called .swf The .swf file is.
Web Concepts Lesson 2 ITBS2203 E-Commerce for IT.
Chapter 4: HTML5 Media - <video> & <audio>
Audio and Video on the Web
HTML5 Level II Session II
Playing Audio (Part 2).
Audio and Video Chapter 10.
Essentials of Web Pages
Playing Audio (Part 1).
Playing Video (Part 2).
Playing Video (Part 1).
HTML5 Media.
Client-Side Internet and Web Programming
Giuseppe Attardi Università di Pisa
Presentation transcript:

Using HTML 5

 HTML 5 uses a standard method to embed audio into Web pages.  Prior to HTML 5, browser plug-ins or separate applications such as Windows Media Center, Apple iTunes, Apple QuickTime, Adobe Flash and Microsoft Silverlight) were required to listen to audio.  The plug-ins were not supported by all browsers or devices which is why a standardize way was needed.

 The following code is needed to embed audio into HTML 5: Your browser does not support the HTML5 audio element.  The controls attribute identifies the default audio controls:pause, play, volume, etc. Any text enclosed within the element will appear to browsers that do not support this audio element.

 Loop=“loop”: ◦ Specifies that the audio or video file will play over and over again without stopping  Autoplay=“autoplay” ◦ Specifies that the video will play immediately upon loading

 HTML 5 supports 3 formats:.mp3,.wav, and.ogg.  You can use any or all of the three formats to ensure various audio formats are supported.

 Chrome: ◦.mp3 ◦.ogg ◦.wav  IE9: ◦ Mp3 (only) ◦ Does not support.wav or.ogg

 Safari: ◦.mp3 ◦.wav ◦ Does not support.ogg  Firefox and Opera ◦.ogg ◦.wav ◦ Does not support.mp3