How to Host and Embed an HLS Live Stream on Your Website
What is HLS?
The HTTP Live Streaming (HLS) protocol was developed by Apple in 2009 to deliver video content to HTML5 video players. This protocol replaced RTMP for delivery, the standard for streaming to the Flash player.
One of the main problems with using Flash on a mobile device is that mobile devices tend to move around. Flash was designed to work with one steady connection to the internet. Mobile devices require much more flexibility than a PC with a cable connection to the internet.
HLS is an adaptive bitrate streaming protocol. This means that it enables responsive video streaming and can automatically adjust the quality of a video based on the speed of the viewer’s internet. This is game-changing because it improves the user experience since adaptive HLS streaming is designed to reduce buffering and lagging.
HLS can be used for both ingest and delivery. However, there aren’t many HLS encoders on the market, so HLS ingestion isn’t yet widely adopted.
HLS Streaming and RTMP Ingest: The Optimal Streaming Setup
RTMP is still very important for live streaming.
Although Flash is a thing of the past, the Real-Time Messaging Protocol (RTMP)is still alive and well. It plays a very important role in the HLS streaming process. RTMP ingest is now commonly used as the default video ingestion protocol, which means it’s responsible for transporting videos to the video-hosting platform or content delivery network (CDN).
The combination of streaming HLS and RTMP delivery is currently the most optimal streaming setup. The HLS protocol gives broadcasters access to the widely adaptable HTML5 encoder, while RTMP provides access to low-latency streaming, affordable encoders, and more. This duo is also the most secure way to go.
Although the RTMP hosting setup is currently the preferred method, there’s no saying how long this will be. Live video streaming protocols are constantly evolving and at an accelerating pace.
How to Embed an HLS Stream
Embedding an HLS stream on your website isn’t too difficult. This process is pretty simple with the right online video player (OVP) and website editor.
For the sake of this tutorial, we’re assuming you’ve already produced video content and have a website built.
Let’s take a look at the 5 steps broadcasters must follow to embed an HLS stream on their websites.
1. Choose an Online Video Platform (OVP)
To embed an HLS stream, you will need to invest in an online video platform that supports HLS software. It also needs to offer an embeddable video player.
Businesses and other professional organizations should invest in a paid solution rather than relying on free platforms like YouTube and DailyMotion. We’ve already discussed some reasons, such as the ability to add your branding and avoid distracting viewers with other creators’ content.
Without going into too much detail, some things to consider when choosing your online video platform include the following:
- Monetization support: Unlike Mslive (which supports subscription video on demand, or SVOD), advertisement-based video on demand (AVOD), and transactional video on demand (TVOD), some platforms don’t have monetization support or just support one or two options. There are plenty of ways to monetize content, and the window of opportunity is growing. Don’t let restrictive platforms deprive you of potentially lucrative monetary gains for your content.
- CDN relationships: If you want to ensure your content is always delivered with the highest possible quality to all parts of the world, be aware of how CDNs play a massive role in reliably delivering content. These networks can cache large sections of video content streams in various server locations. This allows the content to be distributed to users optimally and efficiently whenever they request it.
- Video protection features: It’s all too common nowadays for videos to get stolen and distributed without proper consent. Look for features like DRM, watermarking, domain control, geo-restrictions, and overall security on the platform.
- Customer support: Some platforms offer minimal support on cheaper plans, while others offer top-notch support on all plans. Ironically, many top brands only offer subpar customer service. This is usually because their customer base has outgrown their customer support resources. Or they simply can (sadly) afford to lose a few unsatisfied customers here and there.
- Online reviews: Research online reviews on sites such as G2 and Capterra about different platforms. Make sure you’re looking for trustworthy reviews with well-established companies. There are plenty of young companies who, unfortunately, rely on fake reviews to boost their product. Be wary of new companies with seemingly perfect reviews but an otherwise undeveloped reputation.
Some of the most popular online video platforms include Mslive, Kaltura, Brightcove, and Livestream. Check out our comparison of the top online video platforms for more information on some of the best options on the market.
One of the main reasons for a business or professional organization to use an online video platform is that they offer plug-and-play solutions for most of the challenges broadcasters face.
2. Upload Your Video or Connect Sources
Most OVPs and website editors make it easy to embed and upload an HLS stream.
Once you’ve set up your online video platform, it’s time to upload your video content. Each platform is unique in terms of how the on-demand video upload process works. On Mslive, for example, you can upload individual videos or bulk upload.
On the other hand, if you want to stream live, you’ll need to create a live channel before you can move on to step 3. Here’s how you can do that using Mslive:
1. On the left menu, find and click the “Add +” button.
2. Select “Live Stream” from the menu.
3. A window will pop up. When it does, add a title and select “Standard” as your stream type.
4. Click “Create.”
Follow the above steps to create a live channel to host your live stream successfully. You’re now ready for step 3.
At this stage, you’ll want to set up your sources. This will likely require setting up your encoder and connecting sources through there. If you don’t have an encoder yet, we highly recommend downloading a free version of OBS for Mslive. It’s easy to set up and get started.
Again, we used Mslive as an example in this step, but the process can vary from platform to platform.
3. Choose an Embed Code
Now it’s time to choose an embed code. There are several types of embed codes that are suitable for different use cases.
Mslive offers two embed code options for live streaming: JS and iframe. Both work for playback on your website or app via desktop and mobile devices as long as the video file supports it.
The JS embed code is the default embed code for Mslive, and it supports most features. This includes being responsive if the elements are designed in different sizes and working with the referrer restriction feature.
The iFrame is the most universally compatible embed code. The caveat is that some features don’t work with it.
This embed code is not responsive, which means it’s a fixed size. The full-screen feature is also sometimes removed. This usually happens only if you’re using iframes within iframes.
The URL-based referrer restriction feature doesn’t work with the iframe embed. This is why Mslive chooses to use the JS code as its default.
4. Access Your Website Code
Next, you will need to locate the spot on your website builder that gives you access to the site’s code.
Generally, there’s a block editing mode that allows you to drag and drop elements, and a text editor mode gives you access to the site’s HTML. For this step, you need to find the HTML editor.
So you can see just how easy it can be, we’ll walk you through this step using WordPress, one of the more popular website builders.
Here’s what the process of accessing your website code on WordPress will look like:
1. Open the page or post where you want to add the video
2. There will be a plus sign in the top left corner; click it
3. Search for the word “Video” in the element menu
4. Drag and drop the video element onto the part of the page or post where you’d like the video to be
5. Click the three dots (…) at the top of the video element and click “Edit as HTML.”
If for whatever reason, you still have an older version of WordPress, you may need to switch from “Visual Editor” to “HTML Editor.” It’s unlikely that this will be the case.
If you’re using a platform other than WordPress, please refer to our dedicated guide on embedding a video player on different website builders. It provides specific instructions for how to open the HTML editor on Weebly, Wix, Google Sites, Shopify, Squarespace, GoDaddy, Zyro, and Yola.
5. Insert the Embed Code
Remember that embed code you copied in step 3? Paste that into the HTML of your website via the text editor.
So, continuing on the WordPress example we introduced in the previous step (Step 4): After clicking on the dots at the top of the video element and clicking “Edit as HTML,” you’ll then:
1. Paste your embed code
2. Preview
3. Click “Update”
It’s that easy.
It’s important to highlight that once you paste the embed code snippet into your site’s code, you should preview it to make sure that it looks the way you want it to.
Once you’re happy with the preview, click “Save,” “Publish,” or “Update” to save your changes. Review the changes on the live site to make sure that everything turned out the way you need it to.
Pro-tip: Be sure to review it on different devices such as mobile, tablet, and laptop. Sometimes it may look perfect on one device and clunky on another.
The Connection Between HLS and M3U8
M3U8 is a file format that’s used in video streaming. It’s the Unicode version of the M3U computer file format. The file extension for this file type is “.m3u8”.
HLS is built upon the M3U8 file format, so sometimes “HLS streaming” is referred to as “M3U8 streaming.” Thus, an HLS player is, by definition, an HLS M3U8 player.
Some streaming platforms, like Mslive, use M3U8 links to stream to smart TV apps. This is a bit more technical than the standard settings on many streaming platforms. But for content creators who need a little more exact HLS / M3U8 specifications, Mslive has a range of customization options available.
HLS Alternative: MPEG-DASH
MPEG-DASH (DASH for short) is another way to take advantage of adaptive bitrate streaming. You can, alternatively, embed an HTML5 Player on your website using DASH Adaptive Streaming instead of HLS. However, we believe HLS is the way to go because DASH has one major downside to consider.
The biggest downside of DASH compared with HLS is device compatibility. Apple devices only support HLS. In other words, DASH will not play on Apple devices, such as iPhones and MacBooks. Considering the popularity of Apple devices, this is a huge consideration.
In the past, DASH had the advantage over HLS in delivering better quality at lower bitrates, but there’s no longer that much of a distinction between the two. Likewise, DASH previously supported higher-resolution video compared to HLS, but as of 2017, that’s no longer the case.
For these reasons, HLS is the way to go.
Conclusion
Are you ready to embed an HLS stream?
HLS is arguably the most innovative streaming protocol in live broadcasting. It filled a major need as Flash player took its exit and HTML5 rose to fame, allowing the world access to streaming video on mobile devices. It could be difficult to imagine the world today without it!
The ability to embed an HLS stream anywhere with just a few clicks gives broadcasters more control over their viewer’s experience than ever before.
Mslive offers robust solutions to set up a video player or live stream immediately and easily.
Leave a Comment