Book Image

HTML5 Multimedia Development Cookbook

Book Image

HTML5 Multimedia Development Cookbook

Overview of this book

HTML5 is the most significant new advancement the web has seen in many years. HTML5 adds many new features including the video, audio, and canvas elements, as well as the integration of SVG. This cookbook is packed full of recipes that will help you harness HTML5’s next generation multimedia features. HTML5 is the future.Whether you’re a seasoned pro or a total newbie, this book gives you the recipes that will serve as your practical guide to creating semantically rich websites and apps using HTML5. Get ready to perform a quantum leap harnessing HTML5 to create powerful, real world applications. Many of the new key features of HTML5 are covered, with self-contained practical recipes for each topic. Forget hello world. These are practical recipes you can utilize straight away to create immersive, interactive multimedia applications. Create a stylish promo page in HTML5. Use SVG to replace text dynamically. Use CSS3 to control background size and appearance. Use the Canvas to process images dynamically. Apply custom playback controls to your video.

Related Content you might be interested in

Current Title:

Small book image
HTML5 Multimedia Development Cookbook
May, 2011 | 288 pages
No titles found
Table of Contents (16 chapters)
HTML5 Multimedia Development Cookbook
HTML5 Multimedia Development Cookbook
Credits
Credits
Foreword
Foreword
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Structuring for Rich Media Applications
Structuring for Rich Media Applications
Introduction
Setting up an HTML5 test area
Using the header tag for logos and site titles
Creating a table of contents using the nav tag
Using section tags to structure areas of a page
Aligning graphics using the aside tag
Displaying multiple sidebars using the aside tag
Implementing the footer tag
Applying the outline algorithm
Creating a stylish promo page in HTML5
2
Supporting the Content
Supporting the Content
Introduction
Structuring a blog article
Highlighting text using the mark element
Using the time element
Specifying the pubdate of an article
Displaying comment blocks using the article element
Adding fonts dynamically with @font-face
Adding drop-shadow effects to fonts
Applying gradient effects to fonts
Annotating visual elements using the figure and figcaption tags
3
Styling with CSS
Styling with CSS
Introduction
Setting elements to display:block
Styling a nav block element
Using background-size to control background appearance
Adding rounded corners with border-radius
Including multiple background images
Adding a box shadow to images
Styling for Internet Explorer browsers
4
Creating Accessible Experiences
Creating Accessible Experiences
Introduction
Testing browser support
Adding skip navigation
Adding meta tags
Using semantic descriptions in tags for screen readers
Providing alternate site views
Using hgroup to create accessible header areas
Displaying alternate content for non-supported browsers
Using WAI-ARIA
5
Learning to Love Forms
Learning to Love Forms
Introduction
Displaying placeholder text
Adding autofocus to form fields
Styling forms using HTML5 and CSS3
Using the e-mail input type
Adding a URL using the URL input type
Using the number tag
Using the range tag
Creating a search field
Creating a picker to display date and time
6
Developing Rich Media Applications Using Canvas
Developing Rich Media Applications Using Canvas
Introduction
Setting up the canvas environment
Understanding the 2d rendering context
Processing shapes dynamically
Drawing borders for images using canvas
Rounding corners
Creating interactive visualizations
Bouncing a ball
Creating fallback content
7
Interactivity using JavaScript
Interactivity using JavaScript
Introduction
Playing audio files with JavaScript
Using the drag-and-drop API with text
Crossbrowser video support with vid.ly and jQuery
Displaying video dynamically using jQuery
Movable video ads using jQuery
Controlling the display of images using Easel.js and the canvas tag
Animating a sequence of images using Easel.js and the canvas tag
Random animation with audio using the canvas tag and JavaScript
8
Embracing Audio and Video
Embracing Audio and Video
Introduction
Saying no to Flash
Understanding audio and video file formats
Displaying video for everybody
Creating accessible audio and video
Crafting a slick audio player
Embedding audio and video for mobile devices
9
Data Storage
Data Storage
Introduction
Testing browsers for data storage support
Using browser developer tools to monitor web storage
Setting and getting a session storage variable
Setting and getting a local storage variable
Converting local storage strings to numbers using parseInt
Creating a Web SQL Database
Using a Web SQL database
Creating a cache manifest for offline storage
Displaying the current location using geolocation and geo.js

Testing browser support

Let's start by using the open source Modernizr project at: http://modernizr.com created by developers Faruk Ates and Paul Irish. According to the website, Modernizr uses feature detection to test the current browser against upcoming features.

Note

The Modernizr concept aims at feature detection instead of browser detection. It is a subtle but important differentiation. Instead of making broad assumptions, the Modernizr approach detects features that browsers support.

How to do it...

Download the Modernizr JavaScript file and reference it in the head section of your markup. You will then add the class of "no-js" to your body element, like this: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script>[endif]-->
<script src="modernizr-1.6.min.js"></script>
</head>
<body class...
Previous Section
End of Section 3
Next Section