HLSJS Integration

İlker Göktuğ Öztürk edited this page Jul 7, 2016 · 2 revisions

Integration

Adding Video

Add a video element to HTML body.

<video id="video" controls></video>

Adding Scripts

Scripts files should be added right before the closing body tag.

video.js

Please be sure that you're using the latest version of hls.js.

<!-- hls.js -->
<script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>
gust.js

You should add the key you get from PeerGust panel to script url as key query paramater while adding gust.js and gust.js plugins.

<!-- gust.js -->
<script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>

<!-- plugins/hls.js (hls support plugin for HLSJS) -->
<script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Initialize Video with GustLoader

GustLoader comes within plugins/hls.js

<script>
  var video = document.getElementById("video");
  var player = new Hls({
    loader: GustLoader, // assign GustLoader here.
    autoLevelCapping: true,
  });
  player.loadSource("http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8");
  player.attachMedia(video);
  player.on(Hls.Events.MANIFEST_PARSED, function(){
    video.play();
  });
</script>

Conclusion

All set. You should be seeing the video playing via PeerGust infrastructure.

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>HLSJS VOD</title>
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">HLSJS VOD</h3>

    <main>
      <video id="video" class="video" controls></video>
    </main>

    <!-- HLSJS latest version -->
    <script src="//static.peergust.com/hls.js/dist/hls.min.js"></script>

    <!-- GustJS & GustJS HLSJS Plugin -->
    <!-- NOTE: replace the keys with your own -->
    <script src="//core.peergust.com/gust.js?key=YOUR_KEY"></script>
    <script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>
    <script>
      // initialize GustJS with or without options.
      var options = {
        loadImages: false, // default false
        waitReady: true, // default true
      }
      Gust(options);

      // initialize HLSJS player with GustLoader and play the video.
      var video = document.getElementById("video");
      var player = new Hls({
        loader: GustLoader, // assign GustLoader here.
        autoLevelCapping: true,
      });
      player.loadSource("http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8");
      player.attachMedia(video);
      player.on(Hls.Events.MANIFEST_PARSED, function(){
        video.play();
      });
    </script>
  </body>
</html>