Articles on: Building your Ecosystem

How do I integrate the video in my website?

In this article, you will learn how to embed your video into your website. We’ll assume that you’ve already configured your channel (for instance based on this article). We’ll make the assumption that you have 2 publishing points: one in DASH and one in HLS:

https://ng5zbkkz.live.quortex.io/input_1/premium/hls/index.m3u8 and

https://ng5zbkkz.live.quortex.io/input_1/premium/dash/index.mpd

Choosing between DASH and HLS can sometimes be trickier than it seems. HLS was designed by Apple, and is of course fully supported on all Apple devices … but is also supported on many other platforms. On the other hand, DASH has became a kind of de-facto standards for Android based devices. Do not hesitate to contact us if you need more information!

We are going to focus on Website integration. And for doing that, we are going to leverage two widely used free, open-source players: HLS.js and Shaka Player. Both these players are javascript based and can be integrated into any website in just a few lines of code. Follow the guide!

Integrating HLS.js

As you can guess, HLS.js only handles HLS. HLS.js is widely used in production by major broadcasters throughout the world. You can customize it, but it comes with plenty of nice options out of the box. In this example, we are going to integrate a vanilla version.

Let’s start!

Let’s start by an empty HTML frame!

<html>
  <body>
  </body>
</html>

Embed HLS.js and check browser compatibility!

We can then embed HLS.js. The compiled library is put on a CDN, so you don’t have to host that on your side. We will also make a small check to make sure the browser is supporting MediaSource Extensions.

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    if (Hls.isSupported()) {
      console.log('MediaSources Extensions is supported!');
    }
  </body>
</html>

Attach HLS.js and play!

Then let’s bind video and HLS.js together, parse the manifest … and play the video!

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <video controls width=640 id="video"></video>
    <script>
      if (Hls.isSupported()) {
        const manifestUri = 'https://ng5zbkkz.live.quortex.io/input_1/premium/hls/index.m3u8';
        var video = document.getElementById('video');
        var hls = new Hls();
        hls.attachMedia(video);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          console.log('video and hls.js are now bound together !');
          hls.loadSource(manifestUri);
          hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
            console.log(
              'manifest loaded, found ' + data.levels.length + ' quality level'
            );
            video.play();
          });
        });
      }
    </script>
  </body>
</html>

This is it 🙂 . You can now enjoy your hls stream on any browser!

You can play around this script and add tests to enable native playback; our recommendation is to go with HLS.js rather than relying on the native browser!

Integrating Shaka Player

Shaka player handles both HLS and DASH. It’s a pretty good fit for any browser. Its integration is as easy as HLS.js. It offers different options of customization than HLS.js; we really encourage you to play with both players so see how they fit with your application.

Let’s Start!

Let’s start by an empty HTML frame!

<html>
  <body>
  </body>
</html>

Embed Shaka and check browser compatibility

We can then embed Shaka. The compiled library is put on a CDN, so you don’t have to host that on your side. We will also make a small check to make sure the browser is supporting all the required APIs.

<html>
  <head>
    <!-- Shaka Player compiled library: -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js" integrity="sha512-9SpI4t+0FNlrOTC/bkahpYAV5gNXALQBZXk0zew1HQ9Am5iugZ7dgbIvNhL01GkyY+xDkdMagOAQizXUa2y/gQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Your application source: -->
    <script>
      const manifestUri =
          'https://98cb89b4-87fd-4ff0-b2aa-29bf55aa879d.live.quortex.io/live/hd/dash/index.mpd';

      function initApp() {
        shaka.polyfill.installAll();

        if (shaka.Player.isBrowserSupported()) {
          console.log("All good for Shaka!")
        } else {
          console.error('Browser not supported!');
        }
      }

      document.addEventListener('DOMContentLoaded', initApp);
  </script>

  </head>
  <body>
  </body>
</html>

Initialize Shaka, load the manifest and play!

<html>
  <head>
    <!-- Shaka Player compiled library: -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/3.2.0/shaka-player.compiled.js" integrity="sha512-9SpI4t+0FNlrOTC/bkahpYAV5gNXALQBZXk0zew1HQ9Am5iugZ7dgbIvNhL01GkyY+xDkdMagOAQizXUa2y/gQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Your application source: -->
    <script>
      const manifestUri =
          'https://ng5zbkkz.live.quortex.io/input_1/premium/dash/index.mpd';

      function initApp() {
        shaka.polyfill.installAll();

        if (shaka.Player.isBrowserSupported()) {
          initPlayer();
        } else {
          console.error('Browser not supported!');
        }
      }

      async function initPlayer() {
        const video = document.getElementById('video');
        const player = new shaka.Player(video);

        window.player = player;
        player.addEventListener('error', onErrorEvent);

        try {
          await player.load(manifestUri);
          console.log('The video has now been loaded!');
        } catch (e) {
          onError(e);
        }
      }

      function onErrorEvent(event) {
        onError(event.detail);
      }

      function onError(error) {
        console.error('Error code', error.code, 'object', error);
      }

      document.addEventListener('DOMContentLoaded', initApp);
  </script>

  </head>
  <body>
    <video id="video"
           width="640"
           controls autoplay></video>
  </body>
</html>

This is it 🙂 . You can now enjoy your DASH stream on any browser!

Updated on: 03/12/2024

Was this article helpful?

Thank you!