HTML5 Multimedia Development Cookbook

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.

HTML5 Multimedia Development Cookbook

Credits

Foreword

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

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

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

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

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

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

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

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

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

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

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Setting up the canvas environment

Creating the new canvas element is easy.

How to do it...

Check out how simple this is:

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="FirstCanvas" width="800" height="600">
<!-- Fallback code goes here -->
</canvas>
</body>
</html>

How it works...

Of course, we can use whatever height and width dimensions we need, but that simple set of tags is what we need to start.

Note

You're probably thinking we could use CSS to control the height and width, but resist that temptation. Because the new canvas element contains a 2d rendering context, that approach can cause unpredictable behavior.

There's more...

Next, we'll call the new canvas element JavaScript API while calling jQuery:

<!DOCTYPE html>
<html>
<head>
<title>Canvas</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com...

HTML5 Multimedia Development Cookbook

HTML5 Multimedia Development Cookbook

Overview of this book

Related Content you might be interested in

Current Title:

HTML5 Multimedia Development Cookbook

Setting up the canvas environment

How to do it...

How it works...

Note

There's more...