Advanced Web Tools and Platforms For Publishing Professionals David Pierce February 16 - April 12

Class 5 • • • • •

Utilizing Firebug and admin panels to modify WordpressThemes Manual adjustments to WordPress themes HTML 5 – media Creating a cross browser HTML 5 video. JavaScript demo - Scriptable HTML 5 video and canvas

Course Home Page: www.davidpierce.org/nyu

HTML 5 Media As 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 Containers An audio or video file is really just a container file, similar to a ZIP archive file that contains a number of files. 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 Codecs 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 specific container format and decodes the audio and video tracks that it contains. Some example audTia Polre the following: AAC MPEG-3 MP3 Ogg Vorbis Example video codecs are the following: H.264 VP8 Ogg Theora MPEG4

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 specific container format and decodes the audio and video tracks that it contains. Some example audio codecs: AAC MPEG-3 MP3 Ogg Vorbis Example video codecs are the following: H.264 VP8 Ogg Theora MPEG4

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 APIs The media elements expose a common, integrated, and scriptable API to the document. Declaring an audio and video element are very similar as are the controls available. Unless declaed otherwise controls are automatically included.

HTML5 Audio An audio clip from Johann Sebastian Bach.

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

HTML5 Audio An audio clip from Johann Sebastian Bach. HTML5 Video An audio clip from Johann Sebastian Bach.

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

HTML5 Audio An audio clip - Bach “Air”. Additionally a flash fallback can be specified for legacy browser support,

Some control functions

Read Only Attributes

Scriptable Attributes

CSS Media Queries Media 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+







Simple Media Query Example

body { background-color: red; }



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

{

body { background-color: green; }

}



A much nicer version. #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%;} }

Header Content Sidebar Footer