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

Slides:



Advertisements
Similar presentations
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by Cheryl M. Hughes The Web Wizards Guide to XML by Cheryl M. Hughes.
Advertisements

HTML5 Overview HOANGPT2. 1. General 2. New Elements List 3.
Chapter 15 HTML 5 Video and Audio Intro to HTML5 “Computers and Creativity” Richard D. Webster, COSC 109 Instructor Office: 7800 York Road, Room 422 |
CHAPTER 20 CREATING SVG GRAPHICS. LEARNING OBJECTIVES How to embed a graphic stored within a.SVG file in an HTML page How to use the and tag pair to specify.
Chapter 11 Media and Interactivity Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
UNIT K: INCORPORATING VIDEO AND AUDIO 1 Encoding: the process of transforming moving image and/or sound into a digital file. Each encoding method known.
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.
SVG Scalable Vector Graphics. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines.
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.
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.
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.
CHAPTER 18 INTEGRATING AUDIO AND VIDEO. LEARNING OBJECTIVES How the HTML 5 and tag pair can be used to include a video file within a webpage How video.
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.
PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
Director of Computer Center, DaYeh University Ku-Yaw Chang.
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.
Multimedia and Web Technology Prepared by: Asst. Prof. Maryam Eskandari.
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.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Adding Sound.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
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.
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.
تکنیک های پیشرفته در برنامه سازی وب ) اسلايد نهم SVG - ) جوانمرد Website: به نام خدا.
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.
PLUG INS flash, quicktime, java applets, etc. Browser Plug-ins Netscape wanted a method to extend features of the browser became an unofficial standard.
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.
2 If aliens came to this solar system and observed humans over the last several years, what would they think is the most significant benefits of the.
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 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
INT222 – Internet Fundamentals Week 8: Using New HTML features 1.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
SVG technology SVG technology is what we want? is what we want? Jaehoon Woo KNU Real-Time Systems Lab. KNU Real-Time Systems Lab.
M ULTIMEDIA ON THE W EB. Multimedia Purpose of Multimedia Multimedia Issues HTML5 and elements CSS Transitions and Animations Animation to avoid.
Part – 3 : HTML 5 SVG Tag. † SVG stands for Scalable Vector Graphics. † SVG is used to define vector-based graphics for the Web. † SVG defines the graphics.
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 2 Markup Language By : Madam Hazwani binti Rahmat
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
Chapter 9 HTML 5 Video and Audio
Chapter 4: Scalable Vector Graphics (SVG)
Chapter 4: HTML5 Media - <video> & <audio>
Audio and Video on the Web
Tutorial 7 Working with Multimedia
HTML5 Level II Session II
Playing Audio (Part 2).
Audio and Video Chapter 10.
HTML5 Media.
Basic HTML and Embed Codes
Working with Multimedia
ADUG Melbourne, 18 MARCH 2019 Tony Bryer, Greentram Software
Creating a Basic Web Page using HTML
Presentation transcript:

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

Shockwave Microsoft Media Player Quicktime Real Player But they all had the same issues. End users must install a plugin. You need to upgrade the plugin constantly. There is limited interaction with the rest of the page. and if you think about using that today I will hit you! :p

element is a new feature added in HTML5. element is for embedding the video content on the Web page. element if not supported by the browser then the content between the start tag and end tag is displayed. src attribute is used to link to the video file. Your browser does not support the video

autoplay heightpixelsloopmuted srcURL widthpixels preloadauto metadata none posterURLcontrols

Firefox Opera Safari Chrome

Our job is now to convert the videos we record to these open formats – which can be annoying. The main annoyance is that different browsers support different formats, which means we need to provide several versions :( H.264 “MP4” OGG/Vorbis VP8 / WebM MP3 Ogg Wav

element will help the developer to embed music on the Web site. tag specifies the audio file to be used in the HTML document. src attribute is used to link the audio file. MP3, Ogg and Wav

Your browser does not support the audio element. autoplayloopmuted srcURL preloadauto metadata nonecontrols

What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG integrates with other W3C standards such as the DOM and XSL

SVG Shapes ! Rectangle Circle Ellipse Line Path Polyline Polygon <circle cx="50" cy="50" r="40" stroke="green" stroke-width=“1" fill="yellow" /> The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are omitted, the circle's center is set to (0,0)

MACINTOSH

SVG Stroke Properties ! stroke stroke-width stroke-linecap stroke-dasharray All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.

Last But Not Least… Inkscape is a free and open source software vector graphics editor.

Any thing else you want to know :-/ All images were took from google.com :p