cis 1310 – html & css 11 web multimedia & interactivity

CIS 1310 – HTML & CSS

11

Web Multimedia & Interactivity


Learning OutcomesLearning 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


Multimedia TerminologyMultimedia Terminology

Plugin

Component Added to Browser to Provide Additional Capability

Container

Contains Media & Metadata

Designated by File Extension

Codec

Algorithm Used to Compress Media


AudioAudio

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


AudioAudio

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)


VideoVideo

Frame

Individual Image

Frame Rate

fps — Number of Frames per Second

DVD — 30 fps


VideoVideo

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 IssuesCopyright 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



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



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 TypesMedia 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>


<param><param>

<param />

Attributes

name=“unique name”

Required

value=“#”


Adobe FlashAdobe 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 HTML 5 5 Multimedia ElementsMultimedia 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



<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



<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



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


CSS CSS 33 Transform 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)


CSS CSS 33 Transition Transition

Changes Property Values 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 AppletsJava 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 & jQueryJavaScript & 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


AjaxAjax

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 APIsHTML 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 APIsHTML 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

cis 1310 – html & css 11 web multimedia & interactivity

Documents

media slide

html css audio formats

html css attributes

html css media types

fps slide

html css learning outcomes

wmvwindows media file

lesson slide