Team Blog

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

By Harmonie Duhamel

13 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

    Share this post

    Table of Contents

      Live streaming technology is constantly evolving which is improving the user experience for both broadcasters and viewers. A full third of all online activity is spent watching video. Over the past decade, there has been a major transition in the type of video player that is considered the industry standard. 

      We’ve seen the death of Flash player and the rise of HTML5 video players, which has called for the development of new streaming protocols, including HTTP Live Streaming (HLS).

      In this post, we’re going to discuss everything you need to know about embedding HLS streams.  We will start by talking about video player embedding in general 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. 

      Table of Contents

      • Video Player Embedding: What You Need to Know
      • What is HLS?
      • What is an HTML5 Video Player?
      • 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
      This is the basic layout of a video player.

      A video player is a user-facing media distribution software that allows viewers to access digital video content. Think about the box where the video is displayed on YouTube, Netflix, or anywhere else that you watch video content. That is the video player.

      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 page to incorporate the code of the video player.

      This sounds highly complex, but with the help of a video hosting platform, this is usually pretty easy. A third-party hosting site, like Dacast, typically stores the video files and delivers the content. 

      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 professional broadcasters benefit from controlling the branding and aesthetic elements that surround their video. 

      Swapping out a third-party logo with your own and eliminating other distracting elements, like “Suggested Videos” from other creators, broadcasters can elevate their videos and give them a more professional appearance.

      You can curate your pages and video players to reflect your brand and drive the intended conversions.

      What is an HTML5 Video Player?

      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.

      HLS is an adaptive bitrate streaming protocol. This means that it enables responsive video streaming 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 it 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, 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 HLS streaming/RTMP delivery combination 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 this setup is currently the best, there is no saying how long this will be the case. Technology evolves regularly, especially when it is something like internet 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 should be 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 OVP 

      In order to embed an HLS stream, you’re going to need to invest in an online video platform that supports HLS streaming and 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.

      Check out our comparison of the top streaming solutions for more information on some of the best options on the market.

      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 OVP account, 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

      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 inside is a different size 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.

      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 code

      The 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.”

      Some streaming platforms, like Dacast, use m3u8 links for streaming to stream to smart TV apps. This is a bit more technical than the standard streaming settings on these streaming platforms.

      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. The ability to embed an HLS stream anywhere with just a few clicks gives broadcasters more control over their viewer’s experience.

      For additional information on HLS streaming 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

      Any questions, comments, or ideas? Let us know in the comments section below! And for regular tips on live streaming and exclusive offers, feel free to join our LinkedIn groupThanks for reading, and as always, best of luck with your live streams!

      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 30-Day trial.

      Read Next

      article featured
      article featured
      article featured

      Team Blog

      Mobile Live Streaming: How to Broadcast from a Smartphone

      author avatar

      Emily Krings

      15 Min Read