if ((gPieces[i].row == cell.row) &&
(gPieces[i].column == cell.column)) {
clickOnPiece(i);
return;
}
}
clickOnEmptyCell(cell);
}
The next step is to take the 
MouseEvent
object and calculate which square on the Halma
board just got clicked. The Halma board takes up the entire canvas, so every click is
somewhere on the board. We just need to figure out where. This is tricky, because
mouse events are implemented differently in just about every browser:
function getCursorPosition(e) {
var x;
var y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
At this point, we have 
x
and 
y
coordinates that are relative to the document (that is, the
entire HTML page). But we want coordinates relative to the canvas. We can get them
as follows:
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;
Now we have 
x
and 
y
coordinates that are relative to the canvas (see “Canvas Coordi-
nates” on page 60). That is, if 
x
is 
0
and 
y
is 
0
at this point, we know that the user just
clicked the top-left pixel of the canvas.
From here, we can calculate which Halma square the user clicked, and then act
accordingly:
var cell = new Cell(Math.floor(y/kPieceWidth),
Math.floor(x/kPieceHeight));
return cell;
}
Whew! Mouse events are tough. But you can use the same logic (in fact, this exact code)
in all of your own canvas-based applications. Remember: mouse click→document-
relative coordinates→canvas-relative coordinates→application-specific code.
OK, let’s look at the main drawing routine. Because the graphics are so simple, I’ve
chosen to clear and redraw the board in its entirety every time anything changes within
the game. This is not strictly necessary. The canvas drawing context will retain whatever
A Complete Example | 77
Download from Library of Wow! eBook <www.wowebook.com>
Pdf reader link - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding a link to a pdf; adding hyperlinks to pdf documents
Pdf reader link - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
convert excel to pdf with hyperlinks; add url to pdf
you have previously drawn on it, even if the user scrolls the canvas out of view or
changes to another tab and then comes back later. If you’re developing a canvas-based
application with more complicated graphics (such as an arcade game), you can optimize
performance by tracking which regions of the canvas are “dirty” and redrawing just the
dirty regions. But that is outside the scope of this book. Here’s the board-clearing code:
gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight);
The board-drawing routine should look familiar. It’s very similar to how we drew the
canvas coordinates diagram (see “Canvas Coordinates” on page 60):
gDrawingContext.beginPath();
/* vertical lines */
for (var x = 0; x <= kPixelWidth; x += kPieceWidth) {
gDrawingContext.moveTo(0.5 + x, 0);
gDrawingContext.lineTo(0.5 + x, kPixelHeight);
}
/* horizontal lines */
for (var y = 0; y <= kPixelHeight; y += kPieceHeight) {
gDrawingContext.moveTo(0, 0.5 + y);
gDrawingContext.lineTo(kPixelWidth, 0.5 +  y);
}
/* draw it! */
gDrawingContext.strokeStyle = "#ccc";
gDrawingContext.stroke();
The real fun begins when we go to draw each of the individual pieces. A piece is a circle,
something we haven’t drawn before. Furthermore, if the user selects a piece in antici-
pation of moving it, we want to draw that piece as a filled-in circle. Here, the argument
p
represents a piece, which has 
row
and 
column
properties that denote the piece’s current
location on the board. We use some in-game constants to translate 
(column, row)
into
canvas-relative 
(x, y)
coordinates, then draw a circle, then (if the piece is selected) fill
in the circle with a solid color:
function drawPiece(p, selected) {
var column = p.column;
var row = p.row;
var x = (column * kPieceWidth) + (kPieceWidth/2);
var y = (row * kPieceHeight) + (kPieceHeight/2);
var radius = (kPieceWidth/2) - (kPieceWidth/10);
That’s the end of the game-specific logic. Now we have 
(x, y)
coordinates, relative to
the canvas, for the center of the circle we want to draw. There is no 
circle()
method
in the canvas API, but there is an 
arc()
method. And really, what is a circle but an arc
that goes all the way around? Do you remember your basic geometry? The 
arc()
method
takes a center point 
(x, y)
, a radius, a start and end angle (in radians), and a direction
flag (
false
for clockwise, 
true
for counterclockwise). We can use the 
Math
module that’s
built into JavaScript to calculate radians:
78 | Chapter 4: Let’s Call It a Draw(ing Surface)
Download from Library of Wow! eBook <www.wowebook.com>
RasterEdge .NET Document Imaging Trial Package Download Link.
Adobe PDF. XDoc.PDF. Scanning. XImage.OCR. Microsoft Office. XDoc.Word. XDoc.Excel. XDoc.PowerPoint. Barcoding. XImage.Barcode Reader. XImage.Barcode Generator.
change link in pdf; active links in pdf
C# PDF Library SDK to view, edit, convert, process PDF file for C#
RasterEdge PDF SDK for .NET package offers robust APIs for editing PDF document hyperlink (url) and quick navigation link in PDF bookmark.
add link to pdf; pdf reader link
gDrawingContext.beginPath();
gDrawingContext.arc(x, y, radius, 0, Math.PI * 2, false);
gDrawingContext.closePath();
But wait! Nothing has been drawn yet. Like 
moveTo()
and 
lineTo()
, the 
arc()
method
is a “pencil” method (see “Paths” on page 61). To actually draw the circle, we need to
set the 
strokeStyle
and call 
stroke()
to trace it in “ink”:
gDrawingContext.strokeStyle = "#000";
gDrawingContext.stroke();
What if the piece is selected? We can reuse the same path we created to draw the outline
of the piece to fill in the circle with a solid color:
if (selected) {
gDrawingContext.fillStyle = "#000";
gDrawingContext.fill();
}
And that’s...well, that’s pretty much it. The rest of the program is game-specific logic—
distinguishing between valid and invalid moves, keeping track of the number of moves,
detecting whether the game is over. With nine circles, a few straight lines, and an
onclick
handler, we’ve created an entire game in 
<canvas>
. Huzzah!
Further Reading
• Canvas tutorial on the Mozilla Developer Center
• “HTML5 
canvas
—the basics”, by Mihai Sucan
• Canvas Demos: demos, tools, and tutorials for the HTML 
<canvas>
element
• “The 
canvas
element” in the HTML5 draft standard
Further Reading | 79
Download from Library of Wow! eBook <www.wowebook.com>
How to C#: Basic SDK Concept of XDoc.PDF for .NET
XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
pdf email link; adding hyperlinks to pdf files
VB.NET PDF: Basic SDK Concept of XDoc.PDF
XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF document, including editing PDF url links and quick navigation link in bookmark/outline.
add hyperlink to pdf; add hyperlink to pdf in preview
Download from Library of Wow! eBook <www.wowebook.com>
C# PDF: PDF Document Viewer & Reader SDK for Windows Forms
create PDF document viewer & reader in ASP.NET web application using C# code. Related C# PDF Imaging Project Tutorials! Please click the following link to see
add hyperlinks pdf file; accessible links in pdf
CHAPTER 5
Video on the Web
Diving In
Anyone who has visited YouTube.com in the past four years knows that you can embed
video in a web page. But prior to HTML5, there was no standards-based way to do this.
Virtually all the video you’ve ever watched “on the Web” has been funneled through
a third-party plug-in—maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube
uses Flash.) These plug-ins integrate with your browser well enough that you may not
even be aware that you’re using them—until you try to watch a video on a platform
that doesn’t support that plug-in, that is.
HTML5 defines a standard way to embed video in a web page, using a 
<video>
element.
Support for the 
<video>
element is still evolving, which is a polite way of saying it doesn’t
work yet (at least, it doesn’t work everywhere). But don’t despair! There are alternatives
and fallbacks and options galore. Table 5-1 shows which browsers support the
<video>
element at the time of writing.
Table 5-1. <video> element support
IE9
IE8
IE7
Firefox
3.5
Firefox
3.0
Safari 4
Safari 3
Chrome
Opera
·
·
·
Support for the 
<video>
element itself is really only a small part of the story. Before we
can talk about HTML5 video, you first need to understand a little about video itself.
(If you know about video already, you can skip ahead to “What Works on the
Web” on page 88.)
Video Containers
You may think of video files as “AVI files” or “MP4 files.” In reality, “AVI” and “MP4”
are just container formats. Just as a ZIP file can contain any sort of file within it, video
81
Download from Library of Wow! eBook <www.wowebook.com>
VB.NET PDF: Create PDF Document Viewer in C#.NET for Document
reading PDF document in ASP.NET web, .NET Windows Forms and mobile developing applications respectively. For more information on them, just click the link and
chrome pdf from link; change link in pdf file
VB.NET Word: How to Process MS Word in VB.NET Library in .NET
Besides, here is the quick link for how to process Word document within We are dedicated to provide powerful & profession imaging controls, PDF document, image
clickable links in pdf; add hyperlink pdf document
container formats only define how to store things within them, not what kind of data
is stored. (It’s a little more complicated than that, because not all video streams are
compatible with all container formats, but never mind that for now.)
A video file usually contains multiple tracks: a video track (without audio), plus one
or more audio tracks (without video). Tracks are usually interrelated. An audio track
contains markers within it to help synchronize the audio with the video. Individual
tracks can have metadata, such as the aspect ratio of a video track or the language of
an audio track. Containers can also have metadata, such as the title of the video itself,
cover art for the video, episode numbers (for television shows), and so on.
There are lots of video container formats. Some of the most popular include:
MPEG-4
Usually with an .mp4 or .m4v extension. The MPEG-4 container is based on
Apple’s older QuickTime container (.mov). Movie trailers on Apple’s website still
use the older QuickTime container, but movies that you rent from iTunes are de-
livered in an MPEG-4 container.
Flash Video
Usually with an .flv extension. Flash Video is, unsurprisingly, used by Adobe Flash.
Prior to Flash 9.0.60.184 (a.k.a. Flash Player 9 Update 3), this was the only con-
tainer format that Flash supported. More recent versions of Flash also support the
MPEG-4 container.
Ogg
Usually with an .ogv extension. Ogg is an open standard that is open source–
friendly and is unencumbered by any known patents. Firefox 3.5, Chrome 4, and
Opera 10.5 offer native support, without platform-specific plug-ins, for the Ogg
container format, Ogg video (called “Theora”), and Ogg audio (called “Vorbis”).
On the desktop, Ogg is supported out-of-the-box by all major Linux distributions,
and you can use it on Mac and Windows by installing the QuickTime compo
nents or DirectShow filters, respectively. It is also playable with the excellent
VLC on all platforms.
WebM
With a .webm extension. WebM is a new container format that is technically very
similar to another format called Matroska. WebM was announced at Google I/O
2010. It is designed to be used exclusively with the VP8 video codec and the Vorbis
audio codec. (More on these in a minute.) It will be supported natively, without
platform-specific plug-ins, in the next versions of Chromium, Google Chrome,
Mozilla Firefox, and Opera. Adobe has also announced that the next version of
Flash will support WebM video.
Audio Video Interleave
Usually with an .avi extension. The AVI container format was invented by Micro-
soft in a simpler time, when the fact that computers could play video at all was
considered pretty amazing. It does not officially support many of the features of
82 | Chapter 5: Video on the Web
Download from Library of Wow! eBook <www.wowebook.com>
more recent container formats. It does not officially support any sort of video
metadata. It does not even officially support most of the modern video and audio
codecs in use today. Over time, various companies have tried to extend it in gen-
erally incompatible ways to support this or that, and it is still the default container
format for popular encoders such as MEncoder.
Video Codecs
When you talk about “watching a video,” you’re probably talking about a combination
of one video stream and one audio stream. But you don’t have two different files; you
just have “the video.” Maybe it’s an AVI file, or an MP4 file. As described in the pre-
ceding section, these are just container formats, like a ZIP file that contains multiple
kinds of files within it. The container format defines how to store the video and audio
streams in a single file.
When you “watch a video,” your video player is doing several things at once:
• Interpreting the container format to find out which video and audio tracks are
available, and how they are stored within the file so that it can find the data it needs
to decode next
• Decoding the video stream and displaying a series of images on the screen
• Decoding the audio stream and sending the sound to your speakers
A video codec is an algorithm by which a video stream is encoded. That is, it specifies
how to do #2 above. (The word “codec” is a portmanteau, a combination of the words
“coder” and “decoder.”) Your video player decodes the video stream according to the
video codec, then displays a series of images, or “frames,” on the screen. Most modern
video codecs use all sorts of tricks to minimize the amount of information required to
display one frame after the next. For example, instead of storing each individual frame
(like screenshots), they only store the differences between frames. Most videos don’t
actually change all that much from one frame to the next, so this allows for high com-
pression rates, which results in smaller file sizes.
There are lossy and lossless video codecs. Lossless video is much too big to be useful
on the Web, so I’ll concentrate on lossy codecs. With a lossy video codec, information
is irretrievably lost during encoding. Like copying an audio cassette tape, every time
you encode you’re losing information about the source video and degrading the quality.
Instead of the “hiss” of an audio cassette, a re-re-re-encoded video may look blocky,
especially during scenes with a lot of motion. (Actually, this can happen even if you
encode straight from the original source if you choose a poor video codec or pass it the
wrong set of parameters.) On the bright side, lossy video codecs can offer amazing
compression rates, and many offer ways to “cheat” and smooth over that blockiness
during playback to make the loss less noticeable to the human eye.
Video Codecs | 83
Download from Library of Wow! eBook <www.wowebook.com>
There are tons of video codecs. The three most relevant codecs are H.264, Theora, and
VP8.
H.264
H.264 is also known as “MPEG-4 part 10,” a.k.a. “MPEG-4 AVC,” a.k.a. “MPEG-4
Advanced Video Coding.” H.264 was developed by the MPEG group and standardized
in 2003. It aims to provide a single codec for low-bandwidth, low-CPU devices (cell
phones); high-bandwidth, high-CPU devices (modern desktop computers); and every-
thing in between. To accomplish this, the H.264 standard is split into “profiles”, each
defining a set of optional features that trade complexity for file size. Higher profiles use
more optional features, offer better visual quality at smaller file sizes, take longer to
encode, and require more CPU power to decode in real time.
To give you a rough idea of the range of profiles, Apple’s iPhone supports the Baseline
profile, the AppleTV set-top box supports the Baseline and Main profiles, and Adobe
Flash on a desktop PC supports the Baseline, Main, and High profiles. YouTube (owned
by Google, my employer) now uses H.264 to encode high-definition videos playable
through Adobe Flash; YouTube also provides H.264-encoded video to mobile devices,
including Apple’s iPhone and phones running Google’s Android mobile operating
system. Also, H.264 is one of the video codecs mandated by the Blu-ray specification;
Blu-ray discs that use it generally use the High profile.
Most nonPC devices that play H.264 video (including iPhones and standalone Blu-ray
players) actually do the decoding on a dedicated chip, since their main CPUs are no-
where near powerful enough to decode the video in real time. Many desktop graphics
cards also support decoding H.264 in hardware. There are a number of competing
H.264 encoders, including the open source x264 library. The H.264 standard is patent-
encumbered; licensing is brokered through the MPEG LA group. H.264 video can be
embedded in most popular container formats (see “Video Containers” on page 81),
including MP4 (used primarily by Apple’s iTunes Store) and MKV (used primarily by
noncommercial video enthusiasts).
Theora
Theora evolved from the VP3 codec and has subsequently been developed by the
Xiph.org Foundation. Theora is a royalty-free codec and is not encumbered by any known
patents other than the original VP3 patents, which have been licensed royalty-free.
Although the standard has been “frozen” since 2004, the Theora project (which in-
cludes an open source reference encoder and decoder) only released Version 1.0 in
November 2008 and Version 1.1 in September 2009.
Theora video can be embedded in any container format, although it is most often seen
in an Ogg container. All major Linux distributions support Theora out of the box, and
Mozilla Firefox 3.5 includes native support for Theora video in an Ogg container. By
84 | Chapter 5: Video on the Web
Download from Library of Wow! eBook <www.wowebook.com>
“native,” I mean “available on all platforms without platform-specific plug-ins.” You
can also play Theora video on Windows or on Mac OS X after installing Xiph.org’s
open source decoder software.
VP8
VP8 is another video codec from On2, the same company that originally developed
VP3 (later Theora). Technically, it is similar in quality to H.264 Baseline, with lots of
potential for future improvements.
In 2010, Google acquired On2 and published the video codec specification and a sam-
ple encoder and decoder as open source. As part of this, Google also “opened” all the
patents that On2 had filed on VP8 by licensing them royalty-free. (This is the best you
can hope for with patents—you can’t actually “release” them or nullify them once
they’ve been issued. To make them open source–friendly, you license them royalty-
free, and then anyone can use the technologies the patents cover without paying any-
thing or negotiating patent licenses.) As of May 19, 2010, VP8 is a royalty-free, modern
codec and is not encumbered by any known patents, other than the patents that On2
(now Google) has already licensed royalty-free.
Audio Codecs
Unless you’re going to stick to films made before 1927 or so, you’re going to want an
audio track in your video. Like video codecs, audio codecs are encoding algorithms, in
this case used for audio streams. As with video codecs, there are lossy and lossless audio
codecs. And like lossless video, lossless audio is really too big to put on the Web, so
I’ll concentrate on lossy audio codecs.
Actually, we can narrow the focus even further, because there are different categories
of lossy audio codecs. Audio is used in many places where video is not (telephony, for
example), and there is an entire category of audio codecs optimized for encoding
speech. You wouldn’t rip a music CD with these codecs, because the result would sound
like a four-year-old singing into a speakerphone. But you would use them in an
Asterisk PBX, because bandwidth is precious, and these codecs can compress human
speech into a fraction of the size of general-purpose codecs. However, due to lack of
support in both native browsers and third-party plug-ins, speech-optimized audio co-
decs never really took off on the Web. So I’ll concentrate on general-purpose lossy audio
codecs.
As I mentioned in “Video Codecs” on page 83, when you “watch a video,” your com-
puter is doing several things at once:
1.Interpreting the container format
2.Decoding the video stream
3.Decoding the audio stream and sending the sound to your speakers
Audio Codecs | 85
Download from Library of Wow! eBook <www.wowebook.com>
The audio codec specifies how to do #3—decoding the audio stream and turning it into
digital waveforms that your speakers then turn into sound. As with video codecs, there
are all sorts of tricks to minimize the amount of information stored in the audio stream.
And since we’re talking about lossy audio codecs, information is being lost during the
recording→encoding→decoding→listening lifecycle. Different audio codecs throw away
different things, but they all have the same purpose: to trick your ears into not noticing
the parts that are missing.
One concept that audio has that video does not is channels. We’re sending sound to
your speakers, right? Well, how many speakers do you have? If you’re sitting at your
computer, you may only have two: one on the left and one on the right. My desktop
has three: left, right, and one more on the floor. So-called “surround sound” systems
can have six or more speakers, strategically placed around the room. Each speaker is
fed a particular channel of the original recording. The theory is that you can sit in the
middle of the six speakers, literally surrounded by six separate channels of sound, and
your brain synthesizes them and makes you feel like you’re in the middle of the action.
Does it work? A multi-billion-dollar industry seems to think so.
Most general-purpose audio codecs can handle two channels of sound. During record-
ing, the sound is split into left and right channels; during encoding, both channels are
stored in the same audio stream; and during decoding, both channels are decoded and
each is sent to the appropriate speaker. Some audio codecs can handle more than two
channels, and they keep track of which channel is which so your player can send the
right sound to the right speaker.
There are lots of audio codecs. Did I say there were lots of video codecs? Forget that.
There are gobs and gobs of audio codecs, but on the Web, there are really only three
you need to know about: MP3, AAC, and Vorbis.
MPEG-1 Audio Layer 3
MPEG-1 Audio Layer 3 is colloquially known as “MP3.” If you haven’t heard of MP3s,
I don’t know what to do with you. Walmart sells portable music players and calls them
“MP3 players.” Walmart. Anyway...
MP3s can contain up to two channels of sound. They can be encoded at different
bitrates: 64 kbps, 128 kbps, 192 kbps, and a variety of others, from 32 to 320. Higher
bitrates mean larger file sizes and better-quality audio, although the ratio of audio
quality to bitrate is not linear. (128 kbps sounds more than twice as good as 64 kbps,
but 256 kbps doesn’t sound twice as good as 128 kbps.) Furthermore, the MP3 format
(standardized in 1991) allows for variable bitrate encoding, which means that some
parts of the encoded stream are compressed more than others. For example, silence
between notes can be encoded at a very low bitrate, then the bitrate can spike up a
moment later when multiple instruments start playing a complex chord. MP3s can also
be encoded with a constant bitrate, which, unsurprisingly, is called constant bitrate
encoding.
86 | Chapter 5: Video on the Web
Download from Library of Wow! eBook <www.wowebook.com>
Documents you may be interested
Documents you may be interested