Better Video Streaming With imgix
About The Author
Doug leads Developer Relations at Orkes, studying the intersection of media and web performance. A Google Developer Expert and the author of O’Reilly’s “High …
This article has been kindly supported by our dear friends at imgix who build tools that make images and video on the Internet more beautiful, more performant, more valuable, and safer. Thank you!
Adding video to your website immediately adds value, but also a new level of complexity to your web development. Can I use the
It sounds like a lot (and you might even consider throwing your hands up in the air asking, “Why don’t we just put it up on YouTube?”) This is a valid response — the more you dig into video and video delivery, more and more complexities arise that your developers will have to deal with.
For some, “toss it all on YouTube” might be an adequate solution to handle the complexities of video. But YouTube is based on ads and watching videos, and you probably don’t want an ad appearing in your mission critical content — even worse if it is an ad from your competition! Your goals with video delivery conflict directly with the goals of YouTube’s video delivery platform, making it a less than ideal solution for most enterprises.
Does That Mean We Are Back To Square One?
With the biggest (and cheapest) service removed from consideration, what are the best ways to solve all of the questions in the first paragraph? It is entirely possible to ‘build your own’ video platform, but this leads us back to complexities and pulling your development team away from core features to handle video delivery. From time to market, cost (and cognitive overhead), the best way to add video is to utilize a video streaming service. The great thing today is that you can use the same technologies used by Netflix or Hulu to deliver your videos.
What Is Video Streaming And Why You Need Adaptive Bitrate Video
Video streaming is the way that most video content is delivered on the web today. It features a number of advantages to just using a static video in the
The coolest feature that video streaming introduces is Adaptive Bitrate Video. Before adaptive bitrate video was developed, only one bitrate of the video could be delivered to the customer, regardless of the device or bandwidth environment. This solution is fine when network speeds are fast, but it can be problematic when network speeds are not fast (or fluctuate). And if there is one thing we all know — we cannot control the speed network our customers are using.
On a slow network connection, a traditional video will be very slow to start and very likely to stall. (Stalling is the video streaming term for the video stopping and a “spinner of death” appearing). Adaptive bitrate videos have multiple versions of the video available and can adapt to the network speed of your customer. That ensures that the video will start playback quickly and is much less likely to stall during playback — no matter the speed of your user’s internet connection.
If the network suddenly slows down, the player can also adapt (in the middle of the playback) and begin playing a lower bitrate version of the video. All of these features of adaptive bitrate streaming lead to a better video experience for your customers. It almost sounds like magic, but let’s look at the technology and how it works.
HLS: The Magic Behind Smooth Video Streaming
The industry standard for video streaming is HTTP Live Streaming (HLS). The term Live in the name is a little misleading. While HLS can be used to stream live video, HLS is primarily used for playback of recorded videos, and can be found powering many of the top streaming services.
So how does HLS video work? The first step occurs on video upload when the streaming service generates a number of copies of the video in different bitrates. Then, each copy of the video is sliced into short segments — usually about 5-10 seconds long.
During playback, the video player handles the download and playback of the video. If the rate of download begins to slow compared to the rate of playback — it is possible that the video might stall. So when the player requests the next 5-10 second segment of the video, it requests a lower bitrate version — since lower bitrates download faster, and the chance of video stall is mitigated.
This is the magic of the adaptive bitrate playback — the player adapts the video to meet the network speeds of each unique viewer of your content!
You Mention A Player. Do Browsers Not Support HLS?
This Sounds Complicated
With time and development, it is possible to build your own video streaming platform — delivering an incredible video experience by re-encoding the video to HLS and delivering a customized player to your audience. But, building a video encoding/streaming platform will take a lot of developer time, pulling the team away from building your product. This is why my recommendation is to use a video streaming platform.
What Makes A Good Video Processing Solution?
Outsourcing complicated problems to the experts is a smart idea — you’re hiring domain experts to handle the complicated things rather than tackling them yourself. So what are the features that you should look for in a video streaming solution?
What Service Offers All Of These Features?
imgix has recently released a Video API that meets all of these requirements. Your videos are automatically encoded and streamed from any cloud folder — and with native support for AWS S3, Google Cloud and Azure, imgix can fit seamlessly into your existing workflow.
The imgix API will create either HLS or MP4 versions of your video based on your needs, and you’ll have a customized playback URL to add to your website. You can see all your videos in their Asset Manager, as well as detailed playback analytics. You also get an out-of-the-box video player that easily works in React, Vue, static HTML, and other popular frontend frameworks.
Most importantly, if you need to deliver a large number of images and videos, a solution like imgix can optimize and process both types of assets without you having to build it from the ground up or cobble together different solutions. It’s truly a one-stop platform for visual media processing.
This content was originally published here.