web development -2

sri999

t8.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Enhancing a Website with Multimedia

Tutorial 8

Carey

Objectives

Understand audio and video formats

Insert an HTML audio clip

Support multiple audio formats

Insert an HTML video clip

Write a video caption track

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Format video captions

Create a CSS transition

Explore transition attributes

Create a CSS key frame animation

Apply a CSS animation

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Multimedia on the Web

HTML is the perfect tool to share text and data

The next major phase in HTML language was the introduction of multimedia support

Streaming audio, video, and interactive games, made the web a dominant entertainment platform

One of the biggest challenges

Delivering multimedia content in a form that can be retrieved quickly and easily without loss of quality

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Codecs and Containers

Codec: Computer program that encodes and decodes streams of data

Codecs compress data to transmit it in fast and efficient manner

Codecs decompress data when it is to be read or played back

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Codecs and Containers (continued 1)

The compression method can be either lossy or lossless

Lossy compression: Nonessential data is removed in order to achieve a smaller file size

Example:

An audio file might be compressed by removing sounds that the human ear can barely hear

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Codecs and Containers (continued 2)

The more the file is compressed, the more the content is lost

Data removed during compression cannot be recovered

Lossless compression: Data is compressed by removing redundant information

Example:

AAAABBBBBCCCCCC requires 15 characters of information, which can be rewritten using 6 characters as 4A5B6C

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Codecs and Containers (continued 3)

Lossless compression cannot achieve the same level of compression as with lossy compression

Codecs are placed within a container that handles the packaging, transportation and presentation of data

Container is the file format identified by a file extension

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Codecs and Containers (continued 4)

The web supports a multitude of container and codec combinations

Not all containers and codecs are equally supported

For example, the combination of WebM container and VP8 codec is supported by Google Chrome but not Internet Explorer or any Apple device

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Plug-Ins

Media player: Decodes and plays multimedia content stored within a container file

Plug-in: Software program accessed by a browser to provide a feature or capability not native to the browser

A plug-in either opens in its own external window or runs within the web page as an embedded object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Plug-Ins (continued 1)

Problems with the plug-in approach for delivery of multimedia content

Plugs-ins require users to install a separate application in addition to their web browsers

A common plug-in is not available across all browsers, operating systems, and devices

HTML documents that support multiple plug-ins are difficult to create and maintain

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Understanding Plug-Ins (continued 2)

Plug-ins consume valuable system resources, resulting in slow and unreliable performance

Plug-ins are a security risk with some of the most prominent Internet attacks working their way into browsers via a plug-in

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the audio Element

Audio clips are embedded within a web page using audio element

where url specifies the source of the audio file and attributes define how the audio clip should be handled by the browser

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with the audio Element (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Browsers and Audio Formats

HTML does not specify any particular audio format

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Browsers and Audio Formats (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Browsers and Audio Formats (continued 2)

Nest several source elements within a single audio element to provide several versions of the same media file

<audio>

… </audio>

where, url1, url2,… are the URLs for each audio file and mime-type specifies the audio format associated with each file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Browsers and Audio Formats (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to the Media Player

The appearance of a media player is determined by the browser itself

CSS can be applied to set the width of the media player, add borders and drop shadows, and apply filters and transformations to the player’s appearance

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to the Media Player (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Providing a Fallback to an Audio Clip

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Embedded Objects

Plug-ins in older browsers are marked using the embed element

width=“value” height=“value” />

where url is the location of the media file, type attribute provides the mime-type, and width and height attributes set the width and height of the media player

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Plug-In Attributes

src, type, height, and width attributes are generic attributes applied to embed element for any plug-in

For example, the following embed element adds attributes to display the media player controls and prevent the playback from starting automatically:

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Plug-Ins as Fallback Options

Add embed element to the end of the audio element as the last option for a browser that does not support HTML5 multimedia elements

Use of plug-ins has steadily declined since the widespread adoption of HTML5 standard

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Video Formats and Codecs

A video file contains codecs for the following:

audio

video images

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Video Formats and Codecs (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Video Formats and Codecs (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the HTML5 video Element

Videos are embedded into a web page using video element

… </video>

where attributes are HTML attributes that control the behaviour and appearance of the video playback, url1, url2,… are the possible sources of the video

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the HTML5 video Element (continued 1)

mime-type specifies the format associated with each video file

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the HTML5 video Element (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the HTML5 video Element (continued 3)

poster attribute defines a video’s preview image

…

</video>

where url points to an image file containing the preview image

poster attribute is used as a placeholder image that is displayed when a video is being downloaded

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding a Text Track to Video

Text track that needs to be read or recited to visually impaired users can be added to a media clip

Audio and video content accessible to all users

Text tracks are added to an audio or video clip using track element

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding a Text Track to Video (continued 1)

where,

kind attribute defines the track type

src attribute references a file containing the track text

label attribute gives the track name

srclang attribute indicates the language of the track

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Adding a Text Track to Video (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Making Tracks with WebVTT

Tracks are stored as simple text files written in Web Video Text Tracks or WebVTT language

Format of a WebVTT file

WEBVTT

cue1

cue2

…

where cue1, cue2,… are cues matched with specific time intervals within a media clip

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Making Tracks with WebVTT (continued 1)

List of cues is separated by a single blank line after a cue text

White space is not ignored in WebVTT files

General form of a cue

label

start --> stop

cue text

where label is the name assigned to the cue, start and stop define the time interval, and cue text is the text of the cue

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Making Tracks with WebVTT (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Placing the Cue Text

Size and position of a cue text can be set using cue settings directly after the cue’s time interval

setting1:value1 setting2:value2 …

where setting1, setting2,… define the size and position of the cue text and value1, value2,… are the setting values

There is no space between the setting name and value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Placing the Cue Text (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Placing the Cue Text (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to Track Cues

cue pseudo-element to format the appearance of the cues appearing within a media clip

::cue {

styles

}

Styles for the cue pseudo-element are limited to background, color, font, opacity, outline, text-decoration, text-shadow, visibility, and white-space properties

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to Track Cues (continued 1)

Format specific cues or text strings within a cue using the following markup tags:

<i></i> for italicized text

<b></b> for bold-faced text

<u></u> for underlined text

<span></span> to mark spans of text

<ruby></ruby> to mark ruby text

<rt></rt> to mark ruby text

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to Track Cues (continued 2)

WebVTT supports tags that are not part of the HTML library

<c></c> tag is used to mark text strings belonging to a particular class

<c.classname></c>

<v></v> tag is used for captions that distinguish between one voice and another

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying Styles to Track Cues (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Third-Party Video Players

object element is used to define browsers with plug-ins

parameters

</object>

where attributes define the object and parameters are values passed to the object controlling the object’s appearance and actions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using Third-Party Video Players (continued)

Parameters of the object are defined using param element

where name is the name of the parameter and value is the parameter’s value

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Flash Player

The most-used plug-in for video playback is Adobe Flash player embedded using the following object element:

type=“application/x-shockwave-flash”

width=“value” height=“value”>

parameters

</object>

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring the Flash Player (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Embedding Videos from YouTube

YouTube videos are easy to embed in a web page using YouTube’s HTML5 video player

Click the Share button below the YouTube video player to share it

YouTube provides options to post a hypertext link to the video to a multitude of social media sites or to share the link via e-mail

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Embedding Videos from YouTube (continued 1)

To embed a video within a website, click Embed, which brings up a preview of the embedded player and the HTML code that needs to be added to the web page

The general code for the embedded player is

frameborder=“0” allowfullscreen>

</iframe>

where, the url provides the link to the

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Embedding Videos from YouTube (continued 2)

YouTube video

width and height attributes define the dimensions of the player embedded on a web page

frameborder attribute sets the width of the border around the player in pixels

allowfullscreen attribute allows the user to play the video in full screen mode

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Embedding Videos from YouTube (continued 3)

iframe element: Used to mark inline frames

Inline frames: Windows embedded within a web page that display the content of another page or Internet resource

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

HTML5 Video Players

HTML5 video player works within a browser with CSS and JavaScript files

It presents a customizable player that can be adapted to the needs of business or organization

For example, YouTube player that provides both the player and a hosting service for the video content

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

HTML5 Video Players (continued)

HTML5 includes the following video players:

JWPlayer (www.jwplayer.com)

Video.js (www.videojs.com)

MediaElement.js (mediaelementjs.com)

Projekktor (www.projekktor.com)

Flowplayer/Flash player (flowplayer.org)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Transitions

Transition: Change in an object’s style from the initial state to the ending state, usually in response to an event initiated by the user or the browser

It slows down the change from one color to another and provides intermediate styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Transitions (continued)

To create transition, employ the following transition style:

transition: property duration;

where,

property is a property of the object that changes between the initial and end states

duration is the transition time in seconds or milliseconds

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Transition Timing

Varying speed of transition is defined using

transition: property duration timing-function;

where timing-function is one of the following keywords:

ease: (the default) Transition occurs more rapidly at the beginning and slows down near the end

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Transition Timing (continued 1)

ease-in: Transition starts slowly and maintains a constant rate until the finish

ease-out: Transition starts at a constant rate and then slows down toward the finish

ease-in-out: Transition starts slowly, reaches a constant rate, and then slows down toward the finish

linear: Transition is applied at a constant rate throughout the duration

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Setting the Transition Timing (continued 2)

Timing function can be visualized as a graph

It shows the progress of transition vs. duration

The graphical representation of the timing function is the basis of another measure of transition timing using

cubic-bezier(n, n, n, n)

where n parameter values define the shape of the timing curve

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Delaying a Transition

Transition does not need to start immediately after the event that triggers it

Start of the transition can be delayed by adding delay value to the following:

transition: property duration timing-function delay;

where delay is measured in seconds or milliseconds

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Hover Transition

Transition property can be added to slow down the transition from initial to end state

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Hover Transition (continued)

Limitations of transition

It can only be run when a CSS property is being changed, such as during the hover event

It is run once and cannot be looped for repetition

Initial and end states of the transition can be defined but not the styles of intermediate states

Animation is created to overcome the limitations

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Animating Objects with CSS

Key frame: Sequence of changing images to create illusive movement for animation

CSS replaces the concept of key frame images with key frame styles that are applied in rapid succession to a page object

@keyframes Rule

@keyframes name {

keyframe1 {styles;}

keyframe2 {styles;}

…}

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Animating Objects with CSS (continued)

name provides the name or title of the animated sequence

keyframe1,keyframe2,… defines the progress of individual key frames that are expressed as percentages or with keywords from and to

styles are styles applied within each key frame

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying an Animation

Key frames animation is applied to an object using animation-name and animation-duration properties

animation-name: keyframes;

animation-duration: times;

where keyframes is a comma-separated list of animations applied to the object using the names from the @keyframes rule and times are the lengths of each animation expressed in seconds or milliseconds

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Applying an Animation (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling an Animation

Animation can have two states of operation — play or pause

Check box can be used to control animation

Selecting the check box will play the animation

Unselecting the check box will pause the animation

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling an Animation (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling an Animation (continued 2)

Check box can be replaced with more attractive icons

Display symbol to run the animation

Display symbol to pause the animation

The two symbols have the Unicode values \21bb and \270b, respectively

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling an Animation (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition