How to Host and Embed an HLS Live Stream on Your Website

By Harmonie Duhamel

14 Min Read

banner image featured
author avatar

Harmonie Duhamel

Harmonie is a Senior digital marketer with over 6 years in the Tech Industry. She has a strong marketing and sales background and loves to work in multilingual environments.

Table of Contents

    Live streaming technology is constantly evolving and the user experience is improving for both broadcasters and viewers. Over the past decade, the industry-standard video player has evolved, too.

    We’ve seen the death of Flash players and the rise of HTML5 video players, calling for the development of new streaming protocols, including HTTP Live Streaming (HLS). This improvement is one of many that enhanced the viewing experience for the millions of internet users that frequently watch online videos.

    In this post, we’re going to discuss everything you need to know about embedding HLS streams. We will start by reviewing the basics of video player embedding before diving into the HLS streaming protocol and related technology. Then, we will discuss how to embed an HLS stream. 

    To wrap things up, we will draw the connection between HLS and M3U8 and provide additional insights on how the two work together.

    Table of Contents

    • Video Player Embedding: What You Need to Know
    • What is an HTML5 Video Player?
    • What is HLS?
    • HLS Streaming and RTMP Ingest: The Optimal Streaming Setup
    • How to Embed an HLS Stream
    • How to Embed Multiple Video Players on One Page
    • The Connection Between HLS and M3U8
    • Conclusion

    Video Player Embedding: What You Need to Know

    HTML5 All Device Video Player
    The basic layout of a video player.

    A video player is a user-facing media distribution software that allows viewers access to digital video content. To embed a video player is to add the software to another user-facing page, whether it be on an app, website, or email. This requires altering the code of the email or webpage to incorporate the code of the video player.

    For example, when you watch a video on your computer on Youtube, the square section of the screen where you watch the content is the video player. The rest of the space around the video player is the webpage where the player has been embedded.

    If you don’t have a technical background, learning how to embed a video player on a webpage sounds highly complex. A video hosting platform can make it quick and easy. A third-party video hosting system will store the video files, deliver the content, and help you customize the player so you can embed it on you website and start broadcasting today. 

    Why Embed a Video Player?

    Many professional broadcasters choose to embed a video player on their own site rather than sending viewers to a site like YouTube. The reason for this is that a professional hosting solution adds benefits for broadcasters by allowing them to control the branding and aesthetic elements that surround their video. 

    With a white-label streaming solution, you can swap out a third-party logo with your own. You can also eliminate other distracting elements, like “Suggested Videos” from other creators and broadcasters. This gives you the chance to elevate your own videos while giving them a more professional appearance.

    When you learn how to embed your video player, you can curate your pages and video players to reflect your brand and drive the intended conversions.

    What is an HTML5 Video Player?

    An HTML5 video player is the most popular video player for online video streaming. It is known for its ultra-compatibility. Currently, HTML5 video players are the only widely supported option in online streaming.

    As we mentioned, Flash player is dead. This video player was not compatible with mobile streaming. The rapid growth in popularity of iPhones and other smartphones created the need for a video player that was compatible with these devices. The HTML5 video player was created to fulfill that demand.

    HTML5 video players are highly attractive to broadcasters because their universal compatibility enables them to reach the largest audience possible. There is no concern about leaving out viewers on certain devices.

    The HTML5 video player is also very easy to customize and embed on websites and applications. This makes it valuable for companies that want to brand their video content.

    Although HTML5 has grown in popularity over the past decade, it officially became the only widely supported video player when Chrome and other web browsers nixed the Flash player for good.

    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, which was the standard for streaming to the Flash player.

    One of the main problems with using Flash on a mobile device is that, well, they 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 are not a ton of HLS encoders, so HLS ingest is not yet the standard.

    HLS Streaming and RTMP Ingest: The Optimal Streaming Setup

    RTMP Ingest
    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. In fact, 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 that it is 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 highly-compatible 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 is no saying how long this will be the case. Technology evolves regularly, especially when it is something like online broadcasting that is still relatively new.

    How to Embed an HLS Stream

    Embedding an HLS stream on your website is not difficult. With the right online video player (OVP) and website editor, this process is pretty seamless.

    For the sake of this tutorial, we’re assuming that you’ve already produced video content and have a website built out. 

    That said, let’s take a look at the 5 steps that broadcasters must follow to embed an HLS stream on their websites.

    1. Choose an Online Video Platform (OVP)

    In order to embed an HLS stream, you’re going to need to invest in an online video platform that supports HLS software that offers an embeddable video player. Businesses and other professional organizations are wise to invest in a paid solution rather than relying on free platforms, like YouTube and DailyMotion. We’ve already discussed some of the reasons why, such as the ability to add your own branding and to avoid distracting viewers with other creators’ content.

    Some of the most popular online video platforms include Dacast, Kaltura, Brightcove, and Live stream. Check out our comparison of the top online video platforms for more information on some of the best options on the market.

    The main reason it makes sense for a business or professional organization to use an online video platform is that they offer plug-and-play solutions for all the challenges broadcasters face.

    2.  Upload Your Video or Connect Sources

    cloud video upload
    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 is time to upload your video content. Each platform is a little bit different in terms of how the on-demand video upload process works. On Dacast, for example, you can upload individual videos or you can do bulk uploading. 

    If you are live streaming, you’ll want to set up your sources at this time. This will likely require setting up your encoder and connecting sources through there. Again, this varies from platform to platform.

    3. Choose an Embed Code

    Now, it is time to choose an embed code. There are several types of embed codes that are suitable for different use cases.

    Dacast offers two embed code options for live streaming: JS and iframe. Both of these work for playback on your website or app via desktop and mobile devices as long as the video file itself supports it. 

    The JS embed code is the default embed code for Dacast, and it supports the most features. This includes being responsive if the elements are designed in different sizes and working with the referrer restriction feature. 

    The iframe embed code is the most universally compatible embed code. The caveat is that some features do not 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 are using iframes within iframes. 

    Additionally, the URL-based referrer restriction feature does not work with the iframe embed. This is why Dacast chooses to use the JS code as their default.

    4. Access Your Website Code

    Next, you’re going to need to locate the spot on your website builder that gives you access to the site’s code.

    Generally, there is a block editing mode that allows you to drag and drop elements, and there is a text editor mode that gives you access to the site’s HTML. For this step, you need to find the HTML editor.

    Please refer to our dedicated guide on how to embed a video player on different website builders. It provides specific instructions for how to open the HTML editor on WordPress, Weebly, Wix, Google Sites, 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. Once you paste the embed code snippet into your site’s code, preview it to make sure that it looks how you want it to. 

    Once you’re happy with the preview, click “Save” or “Publish” to save your changes. Review the changes again on the live site to make sure that everything turned out the way that you needed it to.

    How to Embed Multiple Video Players on One Page

    The process of embedding multiple video players on a single page is a little bit different than embedding just one HLS stream.

    This process is quite easy, but it does require some manual embed code editing. The following is a code example on how to include multiple players on a single page.

    To use this code, simply copy and paste this code in your HTML or code editor on the webpage you want to add the video players to. Then, replace the “XXXXX_f_XXXXX” code segments with the ID of your live channels.

    dacast iframe codeThe correct code can be found by looking at the Facebook share code for the channels in question:

    <!DOCTYPE html>
     <!--
     
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates and open the template in the editor.
     -->
     <html>
     <head>
     <title>Test Player</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="//player.dacast.com/js/player.js"></script>
     </head>
     <body>
     <div id='test1'></div>
     <div id='test2'></div>
     <div id='test3'></div>
     <div id='test4'></div>
     <div id='test5'></div>
    
    <script>
     var myPlayer1 = dacast('XXXXX_f_XXXXX','test1',{player:'vjs5', width:600,height:400});
     myPlayer1.onReady(function(){
     myPlayer1.play();
     });
     var myPlayer2 = dacast('XXXXX_f_XXXXX','test2',{player:'vjs5', width:600,height:400});
     myPlayer2.onReady(function(){
     myPlayer2.play();
     });
     var myPlayer3 = dacast('XXXXX_f_XXXXX','test3',{player:'vjs5', width:600,height:400});
     myPlayer3.onReady(function(){
     myPlayer3.play();
     });
     var myPlayer4 = dacast('XXXXX_f_XXXXX','test4',{player:'vjs5', width:600,height:400});
     myPlayer4.onReady(function(){
     myPlayer4.play();
     });
     var myPlayer5 = dacast('XXXXX_f_XXXXX','test5',{player:'vjs5', width:600,height:400});
     myPlayer5.onReady(function(){
     myPlayer5.play();
     });
     </script>
     </body>
     </html>

    The Connection Between HLS and M3U8

    M3U8 is a file format that is used in video streaming. It is 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.” So an HLS player would already be, by definition, an HLS M3U8 player.

    Some streaming platforms, like Dacast, use M3U8 links to stream to smart TV apps. This is a bit more technical than the standard settings on these streaming platforms. But for content creators who need a little more exact HLS / M3U8 specifications, Dacast has a range of customization options available.

     

    Conclusion

    HLS Live Streaming
    Are you ready to embed an HLS stream?

    HLS is the most innovative streaming protocol in live broadcasting at this point. 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. Dacast offers powerful solutions to easily set up a video player or live stream right away. Sign up for a 14-day free trial, no credit card required, and see how easy it is to learn how to embed or create an HLS stream today.

    For additional information on HLS video streaming software or embedding an HLS stream, please feel free to contact our support team. We are happy to answer any questions that you may have.

    Get Started For Free

    For regular live streaming tips and exclusive offers, you can join our LinkedIn group.

    author avatar

    Harmonie Duhamel

    Harmonie is a Senior digital marketer with over 6 years in the Tech Industry. She has a strong marketing and sales background and loves to work in multilingual environments.

    Sign up for a 14-Day trial.

    Read Next

    article featured
    article featured

    H.266 Codec: What is Versatile Video Coding (VVC)?

    author avatar

    Emily Krings

    14 Min Read

    article featured

    The Definitive Guide to Video Streaming Technology in 2022

    author avatar

    Emily Krings

    17 Min Read