David - HTML5 Rich Media Foundation

HTML5 RICH MEDIA FOUNDATION

Matthew David

Focal Press is an imprint of Elsevier

30 Corporate Drive, Suite 400, Burlington, MA 01803, USA

Linacre House, Jordan Hill, Oxford OX2 8DP, UK

2010 Elsevier, Inc. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or any information storage and retrieval system, without permission in writing from the publisher. Details on how to seek permission, further information about the Publishers permissions policies and our arrangements with organizations such as the Copyright Clearance Center and the Copyright Licensing Agency, can be found at our website: www.elsevier.com/permissions.

This book and the individual contributions contained in it are protected under copyright by the Publisher (other than as may be noted herein).

Notices

Knowledge and best practice in this field are constantly changing. As new research and experience broaden our understanding, changes in research methods, professional practices, or medical treatment may become necessary.

Practitioners and researchers must always rely on their own experience and knowledge in evaluating and using any information, methods, compounds, or experiments described herein. In using such information or methods they should be mindful of their own safety and the safety of others, including parties for whom they have a professional responsibility.

To the fullest extent of the law, neither the Publisher nor the authors, contributors, or editors, assume any liability for any injury and/or damage to persons or property as a matter of products liability, negligence or otherwise, or from any use or operation of any methods, products, instructions, or ideas contained in the material herein.

ISBN: 978-0-240-81382-0

For information on all Focal Press publications visit our website at www.elsevierdirect.com

CONTENTS

HTML5 RICH MEDIA FOUNDATION

In the last five years, high-speed Internet connections have become the norm for residential users and businesses across the globe. It is even expected that mobile phones can receive high-speed data feeds. Gone are the days of dial-up Internet.

The ability to push more data down Internet pipes now enables you to access richer content online above and beyond text and images. Two formats that benefit from higher bandwidth rates are audio and video. To this end, HTML5 is now making video and audio elements first-class citizens alongside the IMG element for images and text on your web page.

In this article you will find out how to use the VIDEO and AUDIO elements in your web pages, how to create content that will play back through your web pages, and how to add interactivity via JavaScript to the new elements.

Working with VIDEO and AUDIO Tags

There are two parts to controlling rich media content: the client and the server. In this section you will learn the details of how to control the client piece, the HTML5 VIDEO and AUDIO tags, and review the different ways media can be delivered by servers.

Unless you have not noticed, there is a lot of video on the Internet. From sites such as Hulu to Vimeo to the massive YouTube, video is the centerpiece to our digital world (). To address this demand, HTML5 includes support for two new elements: VIDEO and AUDIO.

Today, the centerpiece technology for delivering media online is Adobes Flash. Adobe has done a very good job of being a good Internet citizen in providing a technology that is easy to use and easy to consume. The challenge you have is that adding Flash-based video to your web page is still hard to complete. To add Flash-based media content yourself you need three things:

Video or audio files

Flash authoring tool

Some HTML expertise with Flash

As an example, to create a video that is embedded in Flash you need to take the following steps:

1. Open Flash authoring tool (such as CS4 or CS5).

2. Import a digital version of your video.

3. Use the Adobe video conversion wizard and convert the video to a format that will play back in Flash.

4. Publish your Flash movie (you now have two files: a video file and a Flash SWF file).

5. Upload both files to your server.

6. Add the correct HTML to your web page.

Figure 4.1 Vimeo allows uploading and broadcasting videos online.

Adding the HTML is the hard part with Flash. Following is an example of how complex it can be to add a Flash video into your web page.

In contrast to using Flash CS4 to create the video you can also use web sites such as Vimeo to convert the video. Following is an example of the HTML code that Vimeo generates to enable you to syndicate your media content.

Both services generate complex code. HTML5 addresses this problem dramatically. The native Flash authoring tool generates over 30 lines of code to embed a Flash movie that, in turn, embeds a video file. In HTML5 all you need is a video file and one line of code using the new VIDEO element, as follows:

Yes, it really is that simple.

Using HTML5 Rich Media Tags

HTML5 wants to make it easier for you to add video and audio using the new VIDEO and AUDIO elements. The two new elements are supported by the following web browsers:

FireFox 3.5, 3.6+

Google Chrome

Apples Safari 3.0, 4.0+

Opera Web Browser 10.5+

As you can see, there is no support for the VIDEO and AUDIO elements in Internet Explorer. If you have read the previous articles in this series, then Microsofts lack of support for HTML5 will come as no shock.

Controlling Video with VIDEO Tags

Using the VIDEO element is as easy as follows:

Thats it. There is no need to add complex OBJECT elements and parameters. If you want to get crazy you can use the following different attributes for the VIDEO element:

autoplaythe video will play immediately if already downloaded in your cache

controlsa simple playback head will be added with VCR-like Play/Pause controls

height and width

loopyou can loop the video

To get the most out of your video playback you will want to use some of these attributes. For instance, if you want your video to start playing when the web page has finished loading you will want to use the AUTOPLAY attribute as follows:

The video will not automatically play if you do not include it. A second useful attribute to add is the controls attribute, as follows:

You will notice that the controls attribute looks different in each browser. shows the attribute in FireFox.

Each browser uses a different playback video engine, and each engine has its own default control style. This can become a problem when it comes to presenting a video playback experience that is consistent from one browser to another. There is a way to override this issue.

The VIDEO and AUDIO elements can be controlled with JavaScript. This means you can control your media using your own custom controls. As an example, the following steps will allow you to add a custom Play/Pause button to your video.