Imagine you’re trying to watch your favorite show on Netflix.
But instead of streaming the video seamlessly, you get nothing but a blank screen. Or you get some kind of error message and the video just won’t play.
You wonder if it’s a glitch from Netflix, so you check with them. But they confirmed it’s not you, it’s them. They fixed the issue in no time and you were able to watch the show right from where you stopped.
Now imagine the same situation, but instead of Netflix, you’re trying to watch a live stream of the Super Bowl. The stakes are much higher since you can’t just pause the game and come back later. An event as important as the Super Bowl needs a streaming solution that’s more than up to the task.
This is where HTTP Live Streaming (HLS) comes in.
In this article, we’ll explain what HTTP Live Streaming is and how it works. We’ll also give you some tips on how to use HLS to ensure a smooth streaming experience, troubleshoot any issues you may encounter, and more.
What is HTTP Live Streaming (HLS)?
HTTP Live Streaming (HLS) is an adaptive bitrate streaming protocol designed to offer users an unparalleled streaming experience across a diverse array of devices. By leveraging the ubiquitous Hypertext Transfer Protocol (HTTP) for data transactions, HLS seamlessly delivers media content and is particularly well-suited for integration with content delivery networks (CDNs).
In more straightforward terms, HLS breaks down your media content into small, easily downloadable segments, ensuring viewers can access and enjoy the content in near-real-time without lengthy buffering delays.
In the past, streaming video content on the web relied heavily on Adobe Flash, a popular plugin that allowed browsers to play video content. However, with the advent of HLS, HTTP-based video delivery became the new standard, gradually phasing out the need for Adobe Flash. This transition to HTTP-based delivery has not only improved performance and security but has also reduced compatibility issues, as most modern browsers natively support HLS.
One of the key advantages of HLS lies in its ability to dynamically adjust the streaming quality based on each viewer’s internet connection. This means that regardless of the viewer’s bandwidth limitations, they can begin watching content almost instantaneously without compromising on the overall viewing experience. HLS’s adaptive bitrate feature enables it to switch between different quality levels on-the-fly, providing a seamless stream without interruptions or sudden drops in quality.
But the advantages of HLS do not end there. In fact, this versatile protocol boasts a range of benefits over traditional streaming methods.
First, HLS offers broad compatibility, making it compatible with a wide range of viewing devices, operating systems, browsers and video formats. This allows content providers to reach a larger audience while ensuring a consistent streaming experience for users across various platforms.
Second, at the heart of the HLS delivery system lies the “index file” or the “m3u8 playlist.” This file contains a list of smaller video segments, enabling HTTP servers to serve them individually to viewers as needed. Since the content is divided into small segments, even if one segment faces delivery issues, it minimally impacts the overall stream, reducing the chances of total interruptions or disconnections during playback.
Additionally, HLS enhances the viewer’s control over their streaming experience. With traditional streaming, viewers have limited control over playback options. However, by leveraging HLS and its support for WebRTC, an advanced video streaming technology, users can experience seamless control over their video playback. WebRTC, along with its API, allows for real-time communication and interactive streaming, making it possible to seek to specific points in the video effortlessly.
This level of interactivity and control over video data is crucial for ensuring a satisfying streaming experience, especially as the audience size grows, involving scalability in the system. Whether viewers are on Windows, macOS or Linux platforms, they can benefit from the HLS-WebRTC combination and enjoy uninterrupted, customizable playback.
HLS’s use of HTTP transactions has a positive impact on network security. By leveraging the standard security features inherent to HTTP, HLS ensures that media content delivery remains secure and reduces the likelihood of data breaches or unauthorized access. HLS’s adaptive bitrate streaming not only relies on HTTP but also on UDP (User Datagram Protocol) for more efficient and low-latency delivery. This is especially crucial for live streaming events, where minimizing delays is of the utmost importance to provide real-time coverage to the viewer.
Furthermore, HLS is an excellent choice for live streaming events. Its segmented nature enables efficient handling of live content, allowing for real-time delivery with minimal latency. This makes HLS a favored option for broadcasting sporting events, concerts, conferences, and other live occasions, ensuring that viewers can experience the action as it unfolds.
HLS employs CMAF (Common Media Application Format), a widely adopted standard, as the underlying format for delivering media content. CMAF further enhances HLS’s compatibility and efficiency by enabling a single media file to be compatible with both HLS and another popular streaming protocol, DASH (Dynamic Adaptive Streaming over HTTP).
With the proliferation of smartphones and the rise of mobile apps, HLS has emerged as a go-to protocol for video delivery on iPhones and other mobile devices. The seamless integration of HLS with HTTP servers allows apps to stream media content efficiently and effortlessly. Users can now enjoy their favorite videos on-the-go, thanks to HLS’s adaptive bitrate streaming, which automatically adjusts the video quality based on the user’s internet connection.
One of the key players in the streaming industry, Microsoft, has recognized the potential of HLS and has integrated support for it in various products and platforms. This has further popularized HLS as a preferred streaming method, extending its reach to a broader user base.
HTTP Live Streaming (HLS) has revolutionized the streaming landscape by providing a versatile and adaptive solution for delivering media content. Its ability to adapt to varying network conditions, broad compatibility, seamless playback experience, and enhanced security features make it a superior choice for seeking to deliver top-notch streaming services to a global audience. Embracing HLS unlocks the potential for reaching a wider viewership while ensuring their satisfaction with a high-quality, uninterrupted, and personalized streaming experience.
How does HLS work?
Here’s a step-by-step overview of how HLS works:
- First, the web server will divide the media file into multiple short segments.
- The server then creates a manifest file, which is also known as an M3U8 file. This is a playlist file or list of the short segments, along with metadata about each segment.
- The manifest or m3u8 file is then sent to the client, either over HTTP or HTTPS, so the end user can access it.
- When the client wants to watch a video, it will request the manifest from the server.
- The server will then send the client the list of video segments.
- The client will begin streaming the first segment and then continue playing each segment in order.
- The manifest will update as new segments become available, and the server can also add additional information such as subtitles or bitrates.
- The client will keep playing the video until it reaches the end of the list.
- If the user pauses or seeks forward/backward in the video, the client will request the appropriate segments from the server.
- Finally, when the user finishes watching the video, they can send an end-of-stream message to the server.
This lets the server know that the user is no longer viewing the video and can free up resources.
Why use HLS over other streaming protocols?
Here are seven reasons to use HLS over other streaming protocols.
1. All major browsers and mobile devices support HLS
Most web browsers support HLS, including desktop Chrome, Firefox, Safari, and Edge.
It’s also compatible with most mobile devices, including Android and iOS. This widespread support makes HLS the go-to streaming protocol for most scenarios. So, if you’re looking to reach the largest possible audience, HLS is the streaming protocol you should opt for.
2. HLS offers the best video quality and reliability
HLS offers superior live video quality and reliability over other streaming protocols, such as RTMP (Real-Time Messaging Protocol) or HDS (HTTP Dynamic Streaming). And this is because the protocol allows for adaptive streaming of the video content, making it a standout choice for content delivery.
This means that the HTML video player, powered by HLS, can automatically adjust to inconsistent network conditions, seamlessly switching between different bitrates and resolution settings to maintain the best possible video quality. Whether the viewer is on a strong and stable Wi-Fi connection or a spotty mobile network, HLS ensures the smoothest possible viewing experience.
Additionally, HLS boasts a wide range of supported video codecs, making it compatible with various video files. Whether it’s H.264, H.265 (HEVC), VP9, or any other popular codec, HLS can efficiently handle them all, offering content providers the flexibility to choose the most suitable codec for their video files.
In addition to adaptive streaming, HLS also incorporates built-in error correction mechanisms. These mechanisms boost reliability while reducing interruptions and video cut-offs due to poor network connections., In the world of live sports broadcasts, where maintaining a stable and high-quality stream is crucial, HLS shines as the preferred choice. It ensures that sports enthusiasts can enjoy every moment of the game without disruptions or sudden drops in video quality.
HLS is also the go-to protocol for on-demand video (VOD) streaming platforms. Viewers can immerse themselves in their favorite movies, TV shows, or user-generated content with unparalleled video quality and a seamless viewing experience.
3. HLS is the most widely adopted streaming protocol in the world
HLS has replaced traditional streaming protocols like RTMP (Real Time Messaging Protocol) and has become the de facto standard for all types of live and on-demand streaming.
And because so many people use it, it’s easy to find hardware and software that supports HLS.
It’s also pretty easy to get help if you run into trouble; since it’s so widely used, a lot of the technical issues have already been solved and documented.
4. HLS is royalty-free and thus easy to deploy and scale
Like many other streaming protocols, HLS is royalty-free and open-source.
This means there are no fees associated with using and deploying HLS, making it a cost-effective option for streaming audio and video content.
And while this isn’t really a “benefit it has over others” point, it does make it easy to deploy and scale without having to worry about additional costs. Overall, HLS is an easy and cost-effective way to stream audio and video content.
5. HLS offers low latency
The amount of time it takes to transmit a video stream from the source to the viewer’s device is known as latency.
HLS stands out from other streaming protocols because of its low latency compared to other protocols. According to Roger Pantos, HLS tech lead at Apple, it takes only 1-2 seconds for a video to be buffered and ready for playback for the viewer, which is significantly less time than other protocols.
This low latency makes HLS an ideal choice, especially for live streaming events, where real-time video playback is critical.
6. Apple supports HLS development with comprehensive documentation and tools
Apple provides comprehensive documentation and tools, including sample projects, that allow developers to quickly build HLS video streams.
There’s a support document on things like:
- enabling low-latency HLS
- setting up audio for live streaming
- measuring and optimizing HLS performance
- working with timed metadata
- dynamic packaging and encryption
- authoring specifications for live streaming
With these resources, you can quickly learn about the technology and get up to speed with building HLS video streams.
There’s also an online community of developers that can help with questions and advice on setting up your HLS streams.
7. Unparalleled security features, including DRM protection and protected content playback”
This HLS protocol exudes unparalleled security, with Digital Rights Management (DRM) protection for your content and secure playback features.
DRM protection ensures that unauthorized use of your content is not possible, and prevents any attempts to copy or distribute the video without your permission.
And if any third party does gain unauthorized access to the content, it will be difficult for them to watch or redistribute it because HLS protocol ensures that all the data and media are encrypted — if you take the steps to encrypt, of course (and you should).
If you’re hosting or streaming out your videos via JWP, you get security features like studio-approved DRM, geo-blocking, HLS token signing, and more — tools that add the level of protection you need to your content with minimal fuss. Learn more about JWP video security features here.
This level of security makes HLS an excellent choice for businesses and organizations with a vested interest in protecting their valuable media assets. It also makes it an ideal streaming technology for services like Netflix, Hulu, and Amazon Prime Video that rely on HLS to ensure their audiences are securely streaming video content.
Overall, the security benefits of HLS make it an excellent choice for businesses looking to protect valuable media assets.
How to set up an HLS stream
How you’d set up an HLS stream may not always be exactly the same for every occasion because of the different streaming applications out there.
But here are some general steps for setting up an HLS stream:
- Choose the correct encoding software for your needs: There are quite many encoding software programs available for streaming, but choose the one that supports HLS streaming — like OBS, Wirecast, or Tricaster. Also consider the other features you’d need in these tools, like streaming to multiple platforms at once, etc., and make sure they support your specific needs.
- Configure the encoding software for streaming: You’ll need to set up your streaming profile with the correct bitrate, resolution, and encoding settings. This is important because it will ensure a smooth streaming experience, so read all the documentation you need before you begin and while you are setting up.
- Connect the encoder to your streaming destination: You’ll need to link up the encoder with your streaming destination, and that’s usually a video streaming platform like JWP, YouTube Live, or any other platform that supports HLS.
- Start the stream: Obviously, once you’re ready to go, you can start your stream and begin streaming content in the HLS format.
Keep in mind that there are other steps you might need to take depending on how you want to configure your stream and the requirements of your streaming service.
For example, you might need to configure digital rights management or use a secure server if you want to stream copyrighted content. But these are just a few of the considerations you’ll need to make when setting up an HLS stream.
7 tips for optimizing your HLS stream
Here are seven important tips to help you optimize your HLS stream:
1. Use different bitrates for each device
You should set up separate bitrate profiles for different types of devices.
This will allow you to provide the best quality stream possible for viewers on mobile, desktop, and other streaming devices. This will also help you save on bandwidth costs — since lower bitrate streams will be sent out to mobile devices or devices with slower connections.
Here are some of the common bitrate formats you can use:
Transcoding your videos also helps here; you can transcode them into different formats and bitrates.
2. Choose an appropriate segment size
As we mentioned before, HLS streams are broken up into small chunks, and the size of these chunks can have a big impact on how your stream is delivered to viewers.
But it’s important you choose an appropriate segment size — one that’s not too small (which can cause buffering) and not too large (which can make it difficult to switch between bitrates, causing buffering as well).
What’s a good segment size for your stream? It often depends on the video length, use case, and trade-offs you’re willing to make — and you’re going to have a few of those as you set up your stream.
But generally speaking, a segment size of between two and ten seconds is usually recommended.
3. Use AES-128 encryption
If you’re streaming copyrighted content, then it’s important that you use an encryption scheme like AES-128 or a similar encryption protocol to protect your stream from piracy.
This will help you add an extra layer of protection to your stream, and it’s an important part of streaming securely.
But to make this work, you need to make sure your video streaming platform can decrypt the stream and play it back for your viewers.
4. Use reliable hosting
You’ll need a server that can reliably deliver your videos and other media content, so make sure you choose a good hosting provider for your HLS stream.
And talking about hosting providers, check out our platform JWP; it has all the features you need to host and stream HLS content with ease, like a reliable CDN, dynamic streaming, secure server hosting, DRM features, and more.
5. Test your stream
It’s important to test your stream on a variety of devices and networks before you start streaming.
This will help catch any problems before they become major issues for your viewers. For example, you can try watching your stream on mobile devices at different locations — so you can be sure your stream will run smoothly no matter where your viewers are.
In addition to device and network testing, it’s also essential to verify your stream’s compatibility with different internet browsers and HTML5 video players. Ensuring that your stream works smoothly on popular browsers like Chrome, Firefox, Safari, and Edge guarantees a wider reach and audience accessibility.
6. Use SSL encryption
To protect your stream from malicious attacks, you should use Secure Sockets Layer (SSL) encryption. And you can do this by enabling HTTPS in your streaming server.
This will also help to ensure your content doesn’t get blocked by any content filters, browsers (like Google Chrome or Safari), or firewalls — as they might not allow unencrypted traffic for fear that it could contain viruses or other malicious code.
7. Monitor your stream
HLS streaming isn’t a set-and-forget process. You should keep an eye on your stream to make sure it’s working properly and responding to viewers’ devices.
For instance, you can know when you’re having issues with buffering or poor video quality and then try optimizing your stream for better playback.
By following these tips, you should be able to get the most out of your HLS streaming experience. Additionally, make sure to take the time to properly set up the encoding software and streaming destination for the best possible results.
5 troubleshooting tips for HLS streaming
Here are five common issues viewers may experience with their HLS streams — and simple solutions that can help.
1. Video lagging
If your video is lagging, there are a couple of reasons this could be happening. And the fault could either be from your end or the viewer’s.
On your side, you can make sure that the server is not overloaded and that there are no network connection issues with your internet service provider (ISP).
Also, your server could be overloaded when there are too many viewers accessing the stream, or when you’re using an insufficient server. The solution here is usually to upgrade your server or scale back on viewers by streaming to fewer locations.
On the viewer’s end, their internet connection could be too slow for the stream. What you can do from your end to resolve this is to transcode the stream into different bitrates so that the viewer can choose a lower one to reduce lag. Or they might not even have to choose a lower bitrate. If their connection is slow, your media player could automatically select one for them.
JWP provides a transcoding feature you can use to create multiple bitrates for HLS streams, where viewers won’t have to manually select a bitrate. Learn more about it here.
2. Poor audio quality
If your audio sounds like it’s being played through a tin can, it could be because your audio bitrate is low — or there’s a connectivity issue between the server and the viewer. To improve the user experience and address this problem, consider using HLS encoding with AAC (Advanced Audio Codec) for your audio streams.
One way to resolve the trebly audio issue is to bump up the audio bitrate to a higher quality, especially when using AAC encoding. Increasing the bitrate will significantly improve the audio’s fidelity and reduce the tinny sound, resulting in a more satisfying user experience.
Additionally, you may need to adjust the settings for the streaming solution if it’s not configured correctly; for example, if you’ve set it to automatically compress the audio, you might need to make some changes to allow for higher quality audio.
3. Connection problems
If you notice your viewers are having connection issues, try increasing the buffer length of your stream. This will allow more time for data to be stored before it’s sent over the network, which should help reduce any connection problems.
If you notice viewers are having connection issues, the first step is to check the internet speed. If their connection is slow, you can try implementing certain solutions to enhance their streaming experience.
One approach is to increase the buffer length of your stream. By doing so, more data will be stored before it’s sent over the network, allowing a buffer of additional time to compensate for fluctuations in internet speed. This should help to reduce any connection problems and prevent interruptions in playback.
Another solution to consider is lowering the maximum bitrate of your stream. By reducing the amount of data being sent over the network, viewers with slower connections can still access the content without experiencing buffering or saturation issues.
Lastly, employing transcoding for your stream is a beneficial option. Transcoding involves converting the video into different bitrates. By offering multiple bitrate options, viewers can choose a lower one that matches their internet speed.
4. Audio and video out of sync
If the audio and video are out of sync, this might be happening because there’s a delay in the stream. If you’re seeing this issue, try lowering the maximum bitrate of your stream to reduce any latency issues.
Or you could try increasing the buffer length of your stream; this will give more time for data to be sent over the network, which should help to reduce any latency issues. Lastly, you may need to adjust the settings for your streaming solution if it’s not configured correctly.
5. Video not playing
If your video isn’t playing, there could be a few potential issues. Firstly, it could be because the player isn’t compatible with the format of your stream. If so, you might need to use a different media player that supports HLS.
It could also be because of several other issues:
- The server could be down
- The internet connection is too slow for the stream
- The maximum bitrate of your stream is too high
The key is to investigate each potential issue and resolve it accordingly. If the server is down, you’ll need to contact your hosting provider. If the internet connection is too slow, you’ll need to transcode the stream into different bitrates. And if the maximum bitrate is too high, you’ll need to reduce it.
Hopefully, going through this list has given you an idea of the potential causes and solutions for common streaming issues. Remember: troubleshooting is often a process of trial and error, so don’t be afraid to experiment until you find the solution that works best for your situation.
Adaptive Streaming with HLS in HTML5
Adaptive streaming is the ability for a video player to dynamically adjust video quality based on available bandwidth, device performance and network conditions. Most modern web browsers only support progressive video playback which does not allow for seamless quality switching. The responsibility to provide adaptive streaming falls on modern video players like JW Player. Adaptive playback comes in many formats and protocols and the popularity of each format has changed over the years.
We are happy to announce support for HLS playback in JavaScript, taking advantage of the HTML5 Media Source Extensions in desktop Chrome. With only a few exceptions, HLS in HTML5 will work as it did with Flash, just faster!
Apple’s HLS protocol is the most widely used streaming format today, partly because it is the only streaming format supported on iOS devices. Using HLS requires media to be packaged in short media segments using the MPEG-2 Transport Stream (M2TS) container standard which is conveniently a standard already used in broadcast television. Unfortunately, M2TS is not a format that all browsers support and requires an application layer on top of the browser to turn the transport stream into a format the browser or application can understand and play. Historically this application layer was written in ActionScript and rendered using Flash. With the advent and wide adoption of the Media Source Extensions, Flash is no longer the sole way of rendering Apple HLS in browsers that do not support the streaming protocol. Instead, browsers can now use fMP4 (Fragmented MP4) to handle HLS streams efficiently without the need for Flash.
Optimizing Playback Quality
The JW Player uses a conservative but accurate calculation to determine the time until a segment is ready for playback after download begins. This is a function of the estimated file size, network latency, network bandwidth and browser performance. The estimated file size is the maximum of either the average segment size thus far or the size as calculated using metadata from the manifest and segment duration. Providing more accurate manifests will help the algorithm settle on the correct level more quickly.
In pseudo-code this looks like :
TimeUntilReady = latency + (fileSize / bandwidth) + (cpuMultiplier * fileSize);
Using this method, the Player calculates the maximum rendition supported such that if we were to perform an upswitch, the timeUntilReady of the new segment is less than the time before playback reaches our minimum allowed forward buffer, including a safety margin. The safety margin is dynamically updated to become more conservative when the network seems unreliable. By using this minimum forward buffer and a safety factor we attempt to eliminate time spent under buffered, while aggressively increasing to the maximum possible quality.
Getting Started
In your JW Player setup, make your primary configuration option ‘HTML5,’ or better yet, remove primary entirely. Primary setting forces a rendering mode for a given media source. JW Player automatically prefers HTML5 media engines over Flash so if you have a primary set to Flash you will not be able to take advantage of HLS in HTML5 in Chrome. The only real reason to still use primary:flash is if you know your ad partner is still using VPAID 1.0 Flash creatives. If that is the case, let us know and we can recommend a partner that is providing VPAID 2.0 HTML5 creatives.
HLS is a preferred media streaming protocol
In the end, whether you choose to use HLS or other streaming protocols — like RTMP, RTSP, or MPEG-DASH — comes down to your particular needs and system constraints.
HLS is a great streaming protocol that can provide high-quality streams to a wide range of devices and platforms with low latency. With the right setup, you can get streaming up and running quickly, making it an ideal choice for large-scale streaming projects.
However, the quality and latency of HLS streams can vary depending on factors such as video resolution, bit rate, and encoding or codec settings. But overall, HLS offers an efficient and reliable streaming solution that is suitable for most projects.
Ultimately, the choice is yours. Just weigh the pros and cons of each protocol before deciding which one is right for your streaming needs.
JW Player offers the highest quality HLS playback across HTML5 desktop and mobile devices! Our market leading HLS support allows you to deliver innovative video experiences for your viewers. Check out all JW Player’s streaming features here.
To learn more about the state of HTML5 video and adaptive streaming with HLS, read this report on our developer site.
Also, watch this demo that shows JW Player loading fragments by comparing your bandwidth to the available video bitrates.
Good luck and happy streaming!