11 Web Multimedia & Interactivity

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

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

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 kHz @ 16-bit Stereo (43kb/sec) — Phone 22 kHz @ 16-bit Stereo (86kb/sec) — Radio 44 kHz @ 16-bit Stereo (172kb/sec) — CD

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)

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

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

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

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

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

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>

<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

<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

<object>

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

<param>

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

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”

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”

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”

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

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; }

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)

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

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>

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

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

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

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