11
Web Multimedia &
Interactivity
CIS 1310 – HTML & CSS
Learning Outcomes

Describe the Purpose of Plugins, Containers, Codecs

Describe Types of Multimedia Files on the Web

Create Links to Multimedia Files

Configure a 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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Audio

Sample

Digital Measurement of an Analog Sound

Sampling Rate


Sampling Resolution


Number of Samples per Second in kHz
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
CIS 1310 – HTML & CSS
Audio

Formats


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)
CIS 1310 – HTML & CSS
Video

Frame


Individual Image
Frame Rate

fps — Number of Frames per Second

DVD — 30 fps
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
Media Types


External

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>
CIS 1310 – HTML & CSS
<object>

Attributes

data=“URL”


height=“#”


Specifies Name for Object
type=“MIME type”


Specifies Height of Embedded Object
name=“name”


Defines a URL that Refers to the Object's Data
Defines the MIME Type of Data Specified in data Attribute
width=“#”

Specifies Width of Embedded Object
CIS 1310 – HTML & CSS
<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
CIS 1310 – HTML & CSS
<object>
CIS 1310 – HTML & CSS
<param>

<param />

Attributes

name=“unique name”


Required
value=“#”
CIS 1310 – HTML & CSS
<param>
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements

<audio> … </audio>


Defines a Sound, Such as Music or Other Audio Stream
Attributes

autoplay=“autoplay”


controls=“controls”


Specifies Audio Will Start Over Again, Every Time it is Finished
preload=“auto | metadata | none”


Specifies Controls Should be Displayed
loop=“loop”


Specifies Audio Will Start Playing as Soon as it is Ready
Specifies How Audio Should be Loaded When Page Loads
src=“url”

Specifies the URL of the Media File
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements

<video> … </video>


Defines a Video, Such as Movie or Other Video Stream
Attributes

autoplay=“autoplay”


controls=“controls”


Sets the Height of the Video Player
loop=“loop”


Specifies Controls Should be Displayed
height=“pixels”


Specifies Audio Will Start Playing as Soon as it is Ready
Specifies Audio Will Start Over Again, Every Time it is Finished
muted=“muted”

Specifies Audio Output of the Video Should be Muted
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements

<video> … </video>

Attributes

poster=“url”


preload=“auto | metadata | none”


Specifies How Audio Should be Loaded When Page Loads
src=“url”


Specifies Image to be Shown Until User Clicks Play Button
Specifies the URL of the Media File
width=“pixels”

Sets the Width of the Video Player
CIS 1310 – HTML & CSS
HTML 5 Multimedia Elements

<source />


Specify Multiple Media Resources for Media Elements
Attributes

media=“media_query”


src=“url”


Specifies the URL of the Media File
type=“MIME_type”


Specifies the Type of Media Resource
Specifies the MIME Type of the Media Resource
<embed />

Defines a Container for a Plug-in
CIS 1310 – HTML & CSS
CSS Image Gallery

Configure each thumbnail image:
<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; }
CIS 1310 – HTML & CSS
CSS 3 Transform

Allows Various Transformations of an Element

Transform:

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)
CIS 1310 – HTML & CSS
CSS 3 Transition

Changes Property Values


Displays in a Smooth Manner Over a Specified Time
transition
property


duration


Specifies Seconds or Milliseconds Effect Takes to Complete
timing


Specifies Name of CSS Property Effect is for
Specifies Speed Curve of Effect
Delay

Defines When Effect Starts
CIS 1310 – HTML & CSS
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>
CIS 1310 – HTML & CSS
JavaScript & jQuery


JavaScript

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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
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
CIS 1310 – HTML & CSS
HTML 5 APIs

Web Storage

Provides Two New Ways to Store Client Side Information

Increases Amount of Data that Can be Stored


Localstorage Object


Stores Data without Expiration Date
Sessionstorage Object


5Mb Per Domain
Stores Data Only for Current Browser Session
Javascript Used to Work with Object Values
CIS 1310 – HTML & CSS