1. 11
Web Multimedia & Interactivity

2. Learning Outcomes Describe the Purpose of Plugins, Containers, Codecs
Describe Types of Multimedia Files on the Web
Create Links to Multimedia Files
Configure Audio & Video on a Web Page
Create an Interactive Image Gallery with CSS
Configure CSS3 Transform & Transition Properties
Describe the Purpose of the HTML5 Canvas Element

3. Multimedia Terminology
Plugin
Component Added to Browser to Provide Additional Capability
Container
Contains Media & Metadata
Designated by File Extension
Codec
Algorithm Used to Compress Media

4. Audio Sample Digital Measurement of an Analog Sound Sampling Rate
Number of Samples per Second in kHz
Sampling Resolution
Precision Measured in Bits
Channel
Stereo | Mono
11 16-bit Stereo (43kb/sec) — Phone
22 16-bit Stereo (86kb/sec) — Radio
44 16-bit Stereo (172kb/sec) — CD

5. Audio Formats .m4a MPEG 4 Audio Uncompressed
.wav Wave File
.aiff Audio Interchange File Format
.au Sun UNIX sound file
Lossless - Compressed without Data Loss
.m4a MPEG 4 Audio
Lossy - Compressed with Data Reduction
.mp3 MPEG-1 Audio Layer-3
.ogg Ogg Vorbis (open-source)

6. Video Frame Frame Rate Individual Image
fps — Number of Frames per Second
DVD — 30 fps

7. Video Formats .avi Microsoft Audio Video Interleaved
.flv Flash Video File
.mov Quicktime
.mpg MPEG (Motion Picture Experts Group)
.m4v .mp4 (MPEG-4)
.ogv Ogg Theora (open-source)
.webm VP8 codec (open video format, free)
.wmv Windows Media File

8. Copyright Issues Only Publish Media That You Have:
Personally Created
Obtained the Rights or License To Use
You Must Request Permission to Use Media
If Created by Another Person
Media Automatically Copyrighted
Even if There is No Copyright Mark or Date
Including Web Pages

9. Copyright Issues Fair Use Clause of the Copyright Act
Quotation of Excerpts in a Review or Criticism
Short Quotation in a Scholarly or Technical Work
Use in a Parody
Summary of an Address or Article
Reproduction by a Teacher or Student
Small Part of a Work to Illustrate a Lesson

10. Copyright Issues Creative Commons
Standardized Way to Give Permission to Use Creative Work
License Types
Attribution
May Copy, Distribute, Display, Perform, & Make Derivative Works
If Author or Licensor is Given Credit
Share-alike
May Distribute Derivative Works
Only if License is Identical to Original Work
Non-commercial
No Derivative Works

11. Media Types External Inline Accessed Through Hyperlinks
Retrieved Only if User Desires
<a href=“ ”></a>
Inline
Embedded into Web Page as an Object
Can be Supplemented with Other Material
i.e., Description
<object> … </object>

12. <object> Attributes data=“URL” height=“#” name=“name”
Defines a URL that Refers to the Object's Data
height=“#”
Specifies Height of Embedded Object
name=“name”
Specifies Name for Object
type=“MIME type”
Defines the MIME Type of Data Specified in data Attribute
width=“#”
Specifies Width of Embedded Object

13. <object> MIME Multipurpose Internet Mail Extensions
Standard Identifier Used on Internet
Indicates Type of Data that File Contains
Use Has Expanded From SMTP To HTTP

14. <object>

15. <param> <param /> Attributes name=“unique name” value=“#”
Required
value=“#”

16. <param>

17. Adobe Flash Popular Multimedia Application
Adds Visual Interest & Interactivity to Web Pages
Flash Movies Saved in .swf Files
Perception of Speedy Display
.swf Files Play as They Download
Flash Player
Free Browser Plug-in
Widely Installed on Browsers

18. HTML 5 Multimedia Elements
<audio> … </audio>
Defines a Sound, Such as Music or Other Audio Stream
Attributes
autoplay=“autoplay”
Specifies Audio Will Start Playing as Soon as it is Ready
controls=“controls”
Specifies Controls Should be Displayed
loop=“loop”
Specifies Audio Will Start Over Again, Every Time it is Finished
preload=“auto | metadata | none”
Specifies How Audio Should be Loaded When Page Loads
src=“url”
Specifies the URL of the Media File
Controls=“controls”

19. HTML 5 Multimedia Elements
<video> … </video>
Defines a Video, Such as Movie or Other Video Stream
Attributes
autoplay=“autoplay”
Specifies Audio Will Start Playing as Soon as it is Ready
controls=“controls”
Specifies Controls Should be Displayed
height=“pixels”
Sets the Height of the Video Player
loop=“loop”
Specifies Audio Will Start Over Again, Every Time it is Finished
muted=“muted”
Specifies Audio Output of the Video Should be Muted
Controls=“controls”

20. HTML 5 Multimedia Elements
<video> … </video>
Attributes
poster=“url”
Specifies Image to be Shown Until User Clicks Play Button
preload=“auto | metadata | none”
Specifies How Audio Should be Loaded When Page Loads
src=“url”
Specifies the URL of the Media File
width=“pixels”
Sets the Width of the Video Player
Controls=“controls”

21. HTML 5 Multimedia Elements
<source />
Specify Multiple Media Resources for Media Elements
Attributes
media=“media_query”
Specifies the Type of Media Resource
src=“url”
Specifies the URL of the Media File
type=“MIME_type”
Specifies the MIME Type of the Media Resource
<embed />
Defines a Container for a Plug-in

22. CSS Image Gallery Configure each thumbnail image: CSS
<li><a href="photo1.jpg"><img src="photo1thumb.jpg" width="100" height="75" alt="Golden Gate Bridge">
<span><img src="photo1.jpg" width="400" height="300“ alt="Golden Gate Bridge"><br>Golden Gate Bridge</span></a>
</li>
CSS
#gallery span { display: none; }
#gallery a:hover span { display: block;
position: absolute; top: 10px;
left: 300px; text-align: center; }

23. CSS 3 Transform Allows Various Transformations of an Element
matrix(n,n,n,n,n,n)
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
perspective(n)
rotate(angle)
scale(x,y)
skew(x-angle,y-angle)
translate(x,y)
translate3d(x,y,z)

24. CSS 3 Transition Changes Property Values transition-
Displays in a Smooth Manner Over a Specified Time
transition-
property
Specifies Name of CSS Property Effect is for
duration
Specifies Seconds or Milliseconds Effect Takes to Complete
timing
Specifies Speed Curve of Effect
delay
Defines When Effect Starts

25. Java Applets Program Included in a Web page
Compiled
Translated into an Encoded Form Called Byte Code.
Uses the .class File Extension
Java Virtual Machine (JVM)
Interprets Byte Code into Proper Machine Language for OS
After Translation, Applet is Executed
Appears on Web Page
Implemented Through <object>

26. JavaScript & jQuery JavaScript jQuery Scripting Language
Developed by Netscape
Enable Web Authors to Design Interactive Sites
jQuery
Free, Open Source JavaScript API (Library)
Navigate Documents, Handle Events, Perform Animations
Add Ajax Interactions to Web Pages
Developed by John Resig
Licensed Under MIT and GNU General Public Licenses

27. Ajax Asynchronous JavaScript and XML
Existing Technologies Used in New Way
Standards-based XHTML & CSS
Document Object Model (DOM)
XML (and Related XSLT Technology)
Asynchronous Data Retrieval Using XMLHttpRequest
Used by JavaScript to transfer XML & Other Text Data
To / From Web Server Using HTTP
JavaScript

28. HTML 5 APIs
Geolocation
Allows Web Page Visitors to Share Geographic Location
Location Determined By
IP Address
Wireless Network Connection
Local Cell Tower
GPS Hardware
Javascript Works with Latitude & Longitude Coordinates

29. HTML 5 APIs
Web Storage
Provides Two New Ways to Store Client Side Information
Increases Amount of Data that Can be Stored
5Mb Per Domain
Localstorage Object
Stores Data without Expiration Date
Sessionstorage Object
Stores Data Only for Current Browser Session
Javascript Used to Work with Object Values