How Video Streaming Works on the Web

This week’s blog comes from the Network Nook, as they talk about video size, streaming, download and bandwidth. Get ready to read some valuable insights!

The April release of the TutorPro LMS brought, among other things, an increased size limit for content uploads. Whilst this is a useful change for several clients, our network team would like to offer some words of caution! Unlike tubs of ice cream, bigger is not always better!

Video Streaming Vs Download

Before we go too far let’s clarify how videos are played in a web browser. The explosion of services such as Netflix, Disney+ and Amazon Prime video has us all used to referring to video streaming. For on-demand services, such as Netflix, that is accurate. A video stream needs to be encoded with a streaming protocol which can be played back in the browser. For example, you may have been prompted when joining webinars to test your connection for HLS or DASH. These are both streaming protocols and have built in support for adaptive playback. In simple terms, this means they can adjust the video stream to the available bandwidth.

In the past few years, the specification of HTML 5 brought the ability to embed video files directly in the HTML code avoiding the need for an external video player for modern web browsers such as Edge, Chrome and Firefox. We can address Internet Explorer later! When you watch a HTML 5 embedded video, the experience can seem like it’s streaming. In fact, the web browser starts playing the video as soon as it gets enough of the video file downloaded and continues to download the rest of the file in the background. This works successfully when the video file can download quickly enough.

Keeping with the ice cream analogy, streaming is like going to an ice cream machine at a buffet whereas HTML 5 embed is more like buying a tub of Ben & Jerrys from the store.

Video Playback with the TutorPro LMS

When a video is uploaded to the LMS it’s either a plain video file such as an mp4 or packaged with a tool such as Articulate or Captivate, and playback is typically via HTML5 embed. If it’s simply a video the LMS sends the file to the user’s browser as fast as the browser asks for it.

While on the subject of HTML 5 video playback, let’s cover the issue around Internet Explorer 11 (IE 11).  IE 11 doesn’t support HTML 5 properly, so we highly advise not using this browser any longer. It’s been around since 2013 and Microsoft has been trying to eradicate it for some time. Please read this for further details: Microsoft apps and services to end support for Internet Explorer 11 – Microsoft Lifecycle | Microsoft Docs. IE 11 doesn’t play HTML 5 embedded video in the browser. Instead, it hands off playback to an installed media player which may wait for the entire video file to download before playing it. It’s not a good experience for your learners. It’s like scooping ice cream with a soggy wafer, it kind of works but there are better options!

Resolutions and Bandwidth

So back to big not always being better! The higher resolution the video the more bandwidth is needed, although other factors such as the video encoding can also play a factor. Today the majority of video we see loaded into the LMS is encoded using H.264 which uses around 3Mbps for HD (High Definition 1280 x 720) and 6Mbps for Full HD (1920 x 1080) video. If you are lucky enough to have H.265 encoding the requirements are roughly half that. Incidentally the bandwidth requirements take a big jump moving from Full HD to Ultra HD (3840×2160, 25Mbps using H.264) or 4K (4096 x 2160, 32Mbps using H.264).

It’s important to know that these figures are for a single person watching the video. The more users watching the video, the more bandwidth required.

Depending on which source you read, the average internet speed in the United States is somewhere between 18Mbps and 130Mbps. Based on this, if we take the high end at 130Mbps, we would use all of the available bandwidth if 20 users were to watch a Full HD (1920 x 1080) video simultaneously In the real world however, that same internet connection needs to be available for company email, web browsing, online meetings and any number of other day to day business needs. Networking teams will often prioritise or shape traffic to ensure these aren’t disrupted.

In the last twelve months we’ve had the additional factor of many of us working from home. Depending on how employees are required to connect to the LMS, this can double the amount of bandwidth used. For example, a user who is required to connect to the company VPN has all their internet traffic pass through the corporate network. Viewing a Full HD video from the LMS would result in the video file being passed down to the corporate network from the LMS server (6Mbps) then back out to the employees’ home (6Mbps) via the VPN, using around 12 Mbps of corporate network bandwidth in total. Except it’s not that simple, of course! Many internet connections have more available bandwidth to download than for uploads. A 130 Mbps connection ‘Down’ may only have 30Mbps ‘Up’. Like a gallon of ice cream, the more people you have eating it, and the bigger the spoons they have, the faster it’s gone.

Final Thoughts

When preparing a video for the LMS, we recommend taking the following into consideration:

  • What is the content intended to show? Is there any benefit in having it in Full HD versus a lower resolution?
  • What type of device is the video going to be viewed on? For the majority of LMS users, this is still a desktop computer. However, we’ve seen an increase in mobile usage, and these might be connecting over mobile networks with lower bandwidths or data caps.
  • How many users are likely to be accessing the video at the same time and from where?

Would you prefer more people with teaspoons or fewer people with tablespoons?! Either way, the ice cream will be eaten! You can decide how many people get a taste. Speaking of which, it’s probably time we restock the freezer with Ben and Jerry’s for the Network team!

If you have any questions at all, don’t hesitate to reach out to support@tutorpro.com