When you click a YouTube link

by Bob Glickstein^[1]

Dramatis Machinae

NARRATOR

Once upon a time, there was an operating system running on a computer, managing access to the screen, the disk, the network, and all of the computer's other components. On the computer’s screen, the operating system was displaying a web browser. The web browser was displaying a web page. And on the web page there was a short piece of underlined text: a link to a YouTube video. The computer, the operating system, the browser, the page in the browser, and the link on the page were sitting idle, minding their own business, when suddenly...

OPERATING SYSTEM

Hello, what’s this? A mouse click? I see that the coordinates of the click fall within a rectangle of the screen presently containing a web browser window. I’d better tell it about the click. Oh, web browser! Mouse click for you!

WEB BROWSER

Thank you, operating system. The click happened inside the rectangle for a web page I’m displaying. Maybe that page will know what to do with it. Web page, please figure out what to do with this mouse click.

WEB PAGE

Righty-o, web browser. I’m divided into rectangular sections called “divs,”and although I don’t know what to do with this click, I’ll bet the div it falls in does. Say, div, do you know what to do with this click?

DIV

Well, I don’t, but I contain some smaller subdivs, and the click falls inside one of them. Subdiv, what do you make of this mouse click?

SUBDIV

I’m full of text, and the click landed on a part of my text that’s labeled with an anchor tag. Anchor tag, can you help with this click?

ANCHOR TAG

I surely can! When a click lands on me I know just what to do. Oh, web browser?

WEB BROWSER

Yes?

ANCHOR TAG

You know the page you’re presently displaying?

WEB BROWSER

Yes.

ANCHOR TAG

Please replace it...

WEB PAGE, DIV, and SUBDIV

Aww.

ANCHOR TAG

...with the one at “http colon slash slash www dot youtube dot com slash watch question-mark v equals a1Y73sPHKxw.”

WEB BROWSER

Right away. Thanks anchor! Operating system, please connect me to the domain name server.

OPERATING SYSTEM

You’re connected, web browser.

WEB BROWSER

Hey, DNS!

DOMAIN NAME SERVER

Yes?

WEB BROWSER

I have an Internet domain name here: www dot youtube dot com. What is its numeric address, please?

DOMAIN NAME SERVER

One moment... ah, here it is. 74 dot 125 dot 239 dot 99.

WEB BROWSER

Thank you. Operating system, please open a connection to the http port at 74 dot 125 dot 239 dot 99.

OPERATING SYSTEM

Stand by, web browser. ...OK, you’re connected.

WEB BROWSER

Hello, 74 dot 125 dot 239 dot 99. I’m a web browser. Please give me whatever you have at “slash watch question-mark v equals a1Y73sPHKxw.”

YOUTUBE FRONT END

Hello web browser, I’m the YouTube front end. Just a moment please. Watch servlet, please come in.

WATCH SERVLET

Watch servlet ready!

YOUTUBE FRONT END

We need the page for “v equals a1Y73sPHKxw.”

WATCH SERVLET

Aye aye! Attention, YouTube database, what can you tell me about video a1Y73sPHKxw?

YOUTUBE DATABASE

So many things! Its title is “Dramatic chipmunk.” It was uploaded by user “cregets” on June 19th, 2007. It’s five seconds long and has been viewed over forty-three million times. It also has a hundred forty-eight thousand “thumbs ups” and forty-six hundred “thumbs downs.” Here is a short list of other videos related to it.

WATCH SERVLET

Got it, thanks. Please add one to the number of views.

YOUTUBE DATABASE

I will, but later. Right now I’m busy with a new request from another servlet. Bye!

WATCH SERVLET

Bye! ...Now to fill in the blanks in my watch-page template using the information the database gave me. ...OK, YouTube front end, here’s the content you asked for. It’s an HTML web page.

YOUTUBE FRONT END

Nice work, watch servlet. Web browser, your content is ready.

WEB BROWSER

Thank you YouTube. I’ll just display this page in -- whoa, hang on. The page says I need to ask you for a CSS stylesheet describing the colors, fonts, and layout. I can’t display anything until I know those things.

YOUTUBE FRONT END

Here’s the stylesheet you asked for.

WEB BROWSER

Thanks. The page also says I need to load a bunch of icons and other graphics.

YOUTUBE FRONT END

Here they are.

WEB BROWSER

And it says I need to load a Javascript program.

YOUTUBE FRONT END

Here’s the Javascript you’ll need.

WEB BROWSER

Thanks, YouTube front end. Now, I’ll just follow the instructions in the HTML and the stylesheet to place everything in my window and -- presto! -- the new page is visible.

WATCH PAGE

Hello! I’m the watch page for video a1Y73sPHKxw. Web browser, I understand you loaded a Javascript program to go along with me? Please run that program now.

WEB BROWSER

Okey-doke.

JAVASCRIPT PROGRAM

Greetings. I’m the Javascript program controlling the YouTube watch page. First things first: all you buttons and menus on the page, any clicks you get, you tell me, OK?

ALL THE BUTTONS AND MENUS

OK!

JAVASCRIPT PROGRAM

Next: somewhere on this page is a video player window, right?

VIDEO PLAYER

That’s me!

JAVASCRIPT PROGRAM

OK, video player. Time to start loading the video content, which you can find at this link...

NARRATOR

The Javascript program gives the video player a very, very long web address.

VIDEO PLAYER

Will do. Excuse me, operating system, I need a connection to the domain name server.

OPERATING SYSTEM

You’re connected, video player.

VIDEO PLAYER

Hello, domain name server?

DOMAIN NAME SERVER

Yes?

VIDEO PLAYER

Will you please tell me the numeric address of r20 dash sn dash nwj7 dot googlevideo dot com?

DOMAIN NAME SERVER

Of course. It’s 74 dot 125 dot 170 dot 25.

VIDEO PLAYER

Thanks. Operating system, please open a connection to the https port at 74 dot 125 dot 170 dot 25.

OPERATING SYSTEM

Your connection is ready.

VIDEO PLAYER

Hello 74 dot 125 dot 170 dot 25. Please start sending me the video stream you have at...

NARRATOR

The video player passes along the very, very long web address.

GOOGLEVIDEO FRONT END

OK, here is some of the video.

VIDEO PLAYER

Awesome. Hey, Javascript program, I am now receiving video data.

JAVASCRIPT PROGRAM

Great! Start playback please.

VIDEO PLAYER

Not yet. At this rate it will take seven seconds to load, but the video is five seconds long, which means we’ll run out of video to display before we reach the end. I’ll save some in my buffer until the time needed to load the rest is less than the time needed to play the video.

GOOGLEVIDEO FRONT END

Here’s some more video data.

VIDEO PLAYER

Thanks. Still not enough to start playback, though.

GOOGLEVIDEO FRONT END

Here’s still more video data.

VIDEO PLAYER

Now it looks like the video will finish transfering before I’m done playing it back, so: playback started!

JAVASCRIPT PROGRAM

Good news. Play button, please change into a pause button.

PLAY/PAUSE BUTTON

Done and done.

VIDEO PLAYER

Playback is in progress.

JAVASCRIPT PROGRAM

Thanks for letting me know. Slider, please update your position.

SLIDER

Moving slightly to the right.

GOOGLEVIDEO FRONT END

Here is yet more video data.

VIDEO PLAYER

Playback is continuing.

JAVASCRIPT PROGRAM

Slider, update your position again.

SLIDER

Moving a little more to the right.

VIDEO PLAYER

Playback is still happening.

JAVASCRIPT PROGRAM

Slider...

SLIDER

I know. Moving.

VIDEO PLAYER

And more playback. Where’s that video data? The buffer’s almost empty!

GOOGLEVIDEO FRONT END

Here is the last chunk of video data. Sayonara!

VIDEO PLAYER

Thank goodness. Playback continuing... and, playback finished!

JAVASCRIPT PROGRAM

Cool. Pause button, please change into a replay button.

PLAY/PAUSE BUTTON

I am now a replay button.

NARRATOR

And so the computer, the operating system, the web browser, and the video player all became idle again, waiting to find out when and where the user would click next.

To the tune of When You Wish Upon a Star

When you click a YouTube link

More things happen than you think

Many servers on the Net

Respond to you

HTTP, DNS

Javascript and CSS

When you click a YouTube link

As clickers do

The web is vast

It brings you what you ask

It’s thanks to decades of

Engineering

Like a bolt out of the sky

A billion bits, they fly right by

When you click a YouTube link

And add a view!

This document is http://goo.gl/w6vZIh