Streams with YouTube

We know that streams are bytes of data that can be used to display text, audio or video and they are used in everyday life.

In this activity we are going to watch a music video on YouTube and we are going to use the F12 developer tools to take a look at the requests being sent and the byte data that is being sent back in the response.

The video we are going to watch is Only Time by Enya.

Note: This might be a little bit tricky and you may need to use the Clear button often.
Ask your teacher for for help if you can't find it.

What are we looking for?

Before we open the video, let's explain what we are looking for, take a look at the below:

YouTube XHR requests

So as you can see we have opened the F12 developer tools and we have navigated to the Network tab, we also need to select the XHR filter as we only want to see XHR requests, everything.

The requests we are looking for are the one that start with videoplayback can you see them in the animation?
If we look at the Response videoplayback request we can see that bytes are being returned (the bytes look funny because they are displayed as text).
If you look very carefuly you can also see that each time one of these request returns, the load progress (that is the white bar above the controls) increases, this is because these bytes contained in the videoplayback request are parts of the video that you are witching, as request are returning, so the video loads, simple isn't it?

Take some time to understand what is going on and what we are looking for.
When you are ready, let's continue.

Watch the video

So without further ado let's watch the video, remember when the video open to immediately open the F12 developer tools, navigate to the Network tab and select the XHR filter.

Okay, so click on this link.

Can you see all the videoplayback request coming in?
So now you can understan how streams are used by media services such as YouTube.

Whilst you are here, make use of the other features of the developer tools and explore the website.
One interesting feature to use is the Elements tab and the Inspector.

That's all folks!

What have we learnt?

  • Media services like YouTube use streams of bytes.
  • We can use the F12 developer tools to see the bytes returned in XHR requests.