Advanced Web Tools and Platforms For Publishing Professionals

David PierceFebruary 16 - April 12

Class 5

• UtilizingFirebugandadminpanelstomodifyWordpressThemes• ManualadjustmentstoWordPressthemes• HTML5–media• CreatingacrossbrowserHTML5video.• JavaScriptdemo-ScriptableHTML5videoandcanvas

Course Home Page:

www.davidpierce.org/nyu

HTML 5 MediaAs bandwidth improves exponentially video and audio media are increasingly becoming the most important content types on the web,

Long ago playing video and audio was frustrating buggy and the user needed to make sure their player aligned with the media in question.

The MP3 compression scheme brought along big changes in media.Also came along quicker comepressions for vidoe via Flash and QuickTime allowing for easier and faster downloads of video.

The audio and video elements add new media options to HTML 5 applications that allow you to use audio and video without plugins while providing a common, integrated, and scriptable API. First, we’ll discuss audio and video container files and codecs, and

Video and Audio ContainersAn audio or video file is really just a container file, similar to a ZIP archive file that contains a number offiles. A video or audio file (ogg, mp3 etc) contains audio tracks, video tracks, and additional metadata. The audio and video tracks are combined at runtime to play the video. The metadata contains information about the video such as cover art, title and subtitle etc.

Video and Audio CodecsAudio and video coders/decoders (codecs) are algorithms used to encode and decode a particular audio or video stream so that they can be played back. Raw media files are enormous, so without encoding, a video or audio clip would consist of tremendous amounts of data that could be too large to transmit across the Internet in a reasonable amount of time. Without a decoder, the recipient would not be able to reconstitute the original media source from the encoded form. A codec is able to understand a specificcontainer format and decodes the audio and video tracks that it contains.Some example audTia Polre the following:AACMPEG-3MP3Ogg Vorbis

Example video codecs are the following:H.264VP8Ogg TheoraMPEG4

MPEG 4 and H.264 are subject to license fees.

Audio and video coders/decoders (codecs) are algorithms used to encode and decode a particular audio or video stream so that they can be played back. Raw media files are enormous, so without encoding, a video or audio clip would consist of tremendous amounts of data that could be too large to transmit across the Internet in a reasonable amount of time. Without a decoder, the recipient would not be able to reconstitute the original media source from the encoded form. A codec is able to understand a specificcontainer format and decodes the audio and video tracks that it contains.Some example audio codecs:AACMPEG-3MP3Ogg Vorbis

Example video codecs are the following:H.264VP8Ogg TheoraMPEG4

MPEG 4 and H.264 are subject to license fees. However companies like Appple have built there hardware infrastructure around these codecs. This has introduced a conflict of interests of browsers that want open source codecs and browsers that are happy with the licensing models. The responsibility to include all options is with the developer.

Google has recently introduced WebM audio and video codec intended to be a catch all. It still lags in support so developers currently must specify video files in a stack

whereas the browser plays the first video or audio file that is compatible.

MPEG 4 and H.264 are subject to license fees. However companies like Appple have built there hardware infrastructure around these codecs. This has introduced a conflict of interests of browsers that want open source codecs and browsers that are happy with the licensing models. The responsibility to include all options is with the developer.

Google has recently introduced WebM audio and video codec intended to be a catch all. It still lags in support so developers currently must specify video files in a stack whereas the browser plays the first video or audio file that is compatible.

Currently the best practice is to specify an Ogg file an H.264 file and a WebM file for best cross browser support.

A table demonstrating current browser support for each of the 3 major codecs.Note that this table is showing the latest current release of each browser. Legacy browsers introduce additional challenges for support.

The HTML 5 Video and Audio APIsThe media elements expose a common, integrated, and scriptable API to thedocument. Declaring an audio and video element are very similar as are the controls available. Unless declaed otherwise controls are automatically included.

<!DOCTYPE html><html><title>HTML5 Audio </title><audio controls src=“johann_sebastian_bach_air.ogg”>An audio clip from Johann Sebastian Bach.</audio></html>

The HTML 5 Video and Audio APIsThe media elements expose a common, integrated, and scriptable API to thedocument. Declaring an audio and video element are very similar as are the controls available. Unless declaed otherwise controls are automatically included.

<!DOCTYPE html><html><title>HTML5 Audio </title><audio controls src=“johann_sebastian_bach_air.ogg”>An audio clip from Johann Sebastian Bach.</audio></html>

<!DOCTYPE html><html><title>HTML5 Video </title><video controls src=“johann_sebastian_bach_air.ogg”>An audio clip from Johann Sebastian Bach.</video>

The HTML 5 Video and Audio APIsAdditional file formats can be specified to ensure different codec support. The users browser will play the first file format compatible.

<!DOCTYPE html><html><title>HTML5 Audio </title><audio controls src=“johann_sebastian_bach_air.ogg”>An audio clip - Bach “Air”.</audio></html>

Additionally a flash fallback can be specified for legacy browser support, <video src=”video.ogg”><object data=”videoplayer.swf” type=”application/x-shockwave-flash”><param name=”movie” value=”video.swf”/></object></video>

Some control functions

Read Only Attributes

Scriptable Attributes

CSS Media QueriesMedia Queries allow us to target specific CSS styles dependingupon the display cabalities of a device. With a few lines of CSS we can change the way content displays based upon te viewport width.

By targeting specific CSS for certain widths we can alter the display of content based on a devices width i.e. mobile device, tablet or desktop,

Media queries are widely supported in all modern browsers including:Internet Explorer 9+, Firefox 3+, Chrome 4+ Android 2.1+, iOs Safari 3.2+

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8” />

<title>Simple Media Query Example</title>

<style>

body

{

background-color: red;

}

@media screen and (min-width: 600px)

{

body { background-color: green; }

}

</style>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8” />

<title>A much nicer version.</title>

<style type=”text/css”>

#header {height: 50px; background: yellow;}

#sidebar {float: left; height: 300px; width: 30%; background:blue;}

#content {float: right; height: 300px; width: 70%; background: #ccc;}

#footer {height: 50px; background: grey; clear:both;}

@media only screen and (max-width: 400px) {

#sidebar, #content {float: none; width: 100%;}

}

</style>

</head>

<body>

<div id=”header”>Header</div>

<div id=”content”>Content</div>

<div id=”sidebar”>Sidebar</div>

<div id=”footer”>Footer</div>

</body>

</html>