How to Host an HLS Live Stream on Your Website

If you’re looking for information about how to embed an HLS live stream on your website, you’ve come to the right place. This blog will examine this topic up and down. We’ll review technical information, the necessary information for embedding, and more.

Live streaming is experiencing a renaissance. A full third of all online activity is spent watching video. More and more of that is live streaming. In fact, 63% of people ages 18-34 are watching live-streaming content regularly. As usual, the youth are setting the trends for the future. The internet is connecting the world at a faster rate than ever before, and live video is at the forefront.

If you want to take advantage of this trend, you’ll need to embed video on your websites. Let’s get started explaining why and how to go about this.

Benefits of embedding live streams on your website

So why embed a live stream on your website? Simply, because that’s where your viewers will be. We do recommend sharing live events and video-on-demand on your social media platforms. However, these embeds should link to your website and you should embed videos to your website directly as well. This will boost your page views and SEO.

Your website is the hub of your online presence. Even if you choose to stream on free social platforms (something we don’t recommend), you’ll want to embed to your website.

When someone searches for you, it’s the first thing that will appear. That alone means it’s worth embedding your live stream to your site. However, there are other use cases in which embedding is essential as well. For example, you may be streaming on a private webpage only accessible to members, employees, or registered customers. In this case, embedding is absolutely essential.

Why HLS is the top streaming technology today

How to Host an HLS Live Stream on Your Website

As an Apple-developed standard, HLS, or http live streaming, is supported by every major operating system and device in use today, from smartphones to tablets to computers and smart TVs. That’s a major benefit. More than 58 percent of video plays globally were on mobile devices in late 2017. That figure is forecast to rise to 60 percent by mid-2018.

HLS is a video streaming protocol that has many benefits. These include support for high resolutions and 360º video, secure video delivery, and excellent quality. HLS was the dominant streaming video format in 2017. There are a few up-and-coming formats like MPEG-DASH which are good to keep an eye on. However, HLS will continue to be the dominant format for the foreseeable future.

How to embed an HLS live stream on your website

Let’s move on now to the meat of this article: how to embed an HLS live stream on your website.

Embedded players are media players that are enclosed in an HTML document or other web space, such as a forum. In the past this was done by using plugins such as Flash. However, nowadays the HTML5 approach is usually used. Native HTML5 video embeds are faster to use, more widely compatible, safer, and don’t require users to install new software.

DaCast supports two different types of video embeds: Javascript and iframe. Let’s compare these two approaches now. Keep in mind that even if you’re using a different video streaming platform, the instructions should be similar.

iFrame vs Javascript for HLS live stream embedding

How to Host an HLS Live Stream on Your WebsiteDaCast supports a dual-embed approach. Using either an iframe or JS (Javascript code), you can embed a player into the HTML of your website. This code will then dynamically deliver content based on the device that views it.

So what is the difference between using Javascript and iframes? They’re mostly the same. We recommend using the JS embed code, as it’s more universally compatible with the full screen feature. Using the JS embed code is also a requirement in order for the URL referral (domain) restriction feature to work. This security feature restricts content based on the websites allowed to host it.

However, the iframe code is more widely compatible and is required for some platforms, including WordPress and WIX.

Embedding a single video player

The instructions for embedding players will differ depending on if you’re embedding one player, or multiple. First, we’ll look at embedding a single HLS live stream. The next section will explain how to embed multiple OTT video on the same page.

Embedded players are simple to setup and use. One embed code will work for all your viewers, on any device. Here’s how the process works with our streaming solution:

  1. In Dacast, you start the embedding process by logging into your DaCast account.
  2. Then, from your homepage, click on the live channel or the VOD, package or playlist you want to embed.
  3. Then go to the “Publish Settings” section. This screenshot shows the embed code. Note the toggle that allows you to select JS or iframe.
  4. Next, visit your website editor, such as WordPress, and navigate to the page you wish to embed the video on.
  5. Open up the page editor, and navigate to the “code view” or HTML editor.
  6. Find the location in the page you wish to insert the code, then paste the code and save. Your video will now be embedded!

If you’ve never edited HTML before, it may take some trial and error to find the right location to insert the code. Don’t worry about it! HTML is designed to be relatively easy to understand—you’ll figure it out. Most website builders like WordPress have a “preview” tool that allows you to preview the results of embedding the video player before you publish the changes.

Embedding multiple video players in a single web page

Now we know how to embed a single video or HLS live stream. How about embedding multiple players in the same page?

This process is possible and quite easy. However, it does require some manual embed code editing. But don’t worry. It’s not too complex. The following is a code example on how to include multiple players in a single page.

To use this code, simply copy-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. The correct code can be found by looking at the Facebook share code for the channels in question. See the image above to see an example of the string that you’ll need to copy into the following embed code.

<!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>

Conclusion

Hopefully, this article has explained how to embed an HLS live stream to your website. All this, of course, requires an online video platform. If you’re interested in testing out a live streaming platform today, sign up for the DaCast free trial. We don’t need your credit card details to sign up.

The free trial lasts for 30-days, and provides access to nearly every DaCast feature. Click the button below to sign up and give it a try!

button

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!

2 thoughts on “How to Host an HLS Live Stream on Your Website

Leave a Reply

Your email address will not be published. Required fields are marked *