Main menu

Tag Archives: WebM

Aside

One of the new elements in HTML5 is the video element and it`s Javascript API. With HTML5 video you can easily embed videos into your page, without the need for external plugins like Adobe Flash, Microsoft Silverlight or Apple QuickTime. Another benefit is that it`s natively integrated into the web browser which allows Javascript to take full control of this element. This means video transformations and image analysis is also possible, along with creating your own start/stop controls. Along the video element this book also explains the audio element and it`s Javascript API.

The book is targeted at web designers and programmers with basic experience in HTML (5) and Javascript. SVG experience is useful but not required.

I’m Ramon van Belzen, a 22 year old webdesigner from Vlissingen, the Netherlands. I’m surfing the web since 1997 and I`ve been programming HTML since 1998. Today I use web technologies like HTML 4, HTML 5, XHTML 1.1, CSS2 / 3, JavaScript, AJAX, jQuery, PHP/MySQL, XML. I currently run over 10 websites, most of them as webmaster and webdesigner.

The book promises to explain what you can and cannot do with the HTML5 video element. By reading this book you will learn how to integrate video in all the major browsers, the different codecs, creating your own controls and using the Javascript video API. It also teaches you how to integrate video with the canvas element, SVG, CSS and web workers.

The first three chapters of the book explain the basics of implementing video in your page. The following four chapter explain how to integrate the media elements with other technologies like SVG, Canvas, Javascript and Web Workers. The final four chapters are more advanced and explain more experimental techniques like reading and manipulating audio, accessibility and the future.

The first chapter tells you about the history and origin of the video element. Later on the basics of codecs is explained. Finally a short sum-up of the major browsers current supported codecs and sites who use these codecs is described. This chapter also contains a lot of footnotes to sites where you can find more information about statements and the discussion which led to the HTML5 specifications.

Chapter two starts with the basics of implementing video and the basic attributes like autoplay. Further on the same is done for the audio element. Next up is a simple Javascript to test the browsers codec support. Paragraph 2.2 ends with how-to encode files to HTML5 video and audio codecs. Also HTTP streaming is explained and implementation examples are given. The last paragraph explains the user interface and finally a short summary of the chapter is given.

The third chapter explains how to style the video element with CSS 3. What more can I say about it?

The next chapter (four) explains the use of Javascript in combination with the video element. It contains things like timing, stretching, error reports, events (like start, stop) and ends with creating your own start/stop buttons.

The fifth chapter is about integrating Scalable Vector Graphics (SVG) and video. The chapter starts with the basics of SVG and examples how to merge these two techniques. Next is using more advanced techniques like using a graphic to control the video, using gradients, patterns and effects like blur. Also SVG animations in combination with a video element is described. The chapter ends with reflections and video edge detection.

Following chapter explains how to use HTML5 media in combination with the canvas element. With the canvas API it`s possible to draw bitmaps of video frames within HTML5 and create video effects. It`s even possible to emulate green screen effects (to change the background). Together with CSS3 styling you can make strange effects like 3D and add gradients and text with video as filling. The chapter ends with creating simple animations.

Video editing is CPU-heavy. With HTML5`s web worker API it`s possible to split these Javascript codes into small workers which can use multi-threading and afterwards combine the work. How to do this and some benchmarks are explained in this chapter. Examples include converting to sepia colors, motion detection, region segmentation and face detection (actually skin color detection).

The HTML5 Audio API is chapter eights content. It starts with extraction of audio samples and basic information functions. Next is displaying waveforms using the canvas element. Also audio spectrum graphic rendering using FFT is explained. With the HTML5 Audio API it`s also possible to render tones with Javascript. Paragraph 3 explains how to use the filter graph API, which contains audio effects like gain, delay, filtering, panning, convolutions (impulse responses like reverbs), channel split/merge and a real-time analyzer.

Chapter nine is about accessibility and internationalization. The chapter starts with the theoretical part behind this. The second paragraph explains how to create interactive transcripts using HTML. The next paragraph demonstrates and explains how to use synchronized text using WebSRT.

The final chapter – number ten – explains the use of audio and video using the device element. This chapter also uses the Stream,WebSockets and ConnectionPeer APIs. The chapter ends with a simple two-user video conversation.

The book ends with a summary and outlook of what to expect, like the Metadata and Quality of Service API`s.

The book promises to teach you everything about HTML5 and it does. It’s so complete that I cannot think of anything I want to do with HTML5 video which is not mentioned. It teaches you how to make your own players, synchronize multiple videos and implement video effects. There is no other book out there (at this moment) which goes so into detail when it comes to HTML5 video.

After reading this book I didn`t have any questions.

Everything demonstrated in the book is shown with multiple browsers (five) and mentions if it works or not – and if not how to create a workaround.

What I liked very much about the book is that it contains loads of screenshots, one for every function, which demonstrates how the function looks in different browsers. What I also liked is the amount of footnotes. Whenever you want to learn more about a certain code or information, just visit the link in the footnote.

What I disliked about the book is that the Javascript programming sometimes goes a bit too fast and to deep, but this might be user depended. I have to admit that I’m not a Javascript programming wonder.

The book covers everything I wanted to know about HTML5 video and more.

If I had the chance to improve the book I would explain the Javascript code more.

I can recommend this book to everybody who wants to dive into the world of HTML5 video or who wants to replace other third party video systems like Flash and who wants to make the switch to HTML5.

More information about this book can be found at www.apress.com/book/view/1430230908 The product page also contain links to a sample and a link to buy the book – either as printed version or eBook.