Flowplayer HLS Integration

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

Integration

Adding Styles

Add Flowplayer css file to your head.

<link href="//static.peergust.com/flowplayer/dist/skin/minimalist.css" rel="stylesheet" />

Adding Video

Add a video div to HTML body.

<div id="video" class="video"></div>

Adding Scripts

Scripts files should be added right before the closing body tag

hls.js

Flowplayer relies on hls.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>
flowplayer

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

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

<!-- flowplayer.hls -->
<script src="//static.peergust.com/flowplayer-hlsjs/flowplayer.hlsjs.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 Flowplayer) -->
<script src="//core.peergust.com/plugins/hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Assing GustLoader to Flowplayer

Assign GustLoader to global Flowplayer conf object. GustLoader comes within plugins/hls.js

<script>
  flowplayer.conf.hlsjs = {
    loader: GustLoader,
  };
</script>

Initialize Video

<script>
  var player = flowplayer("#video", {
    autoplay: true,
    clip: {
      sources: [{
        type: 'application/x-mpegurl',
        src: 'http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8',
      }]
    }
  });

player.play();
</script>

Conclusion

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

Sample Configuration

<!doctype html>
<html>
  <head>
    <title>Flowplayer HLS VOD</title>
    <link href="//static.peergust.com/flowplayer/dist/skin/minimalist.css" rel="stylesheet">
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">Flowplayer HLS VOD</h3>

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

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

    <!-- Flowplayer latest version & Flowplayer HLS latest version -->
    <script src="//static.peergust.com/flowplayer/dist/flowplayer.min.js"></script>
    <script src="//static.peergust.com/flowplayer-hlsjs/flowplayer.hlsjs.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);

      // assign GustLoader to Flowplayer.
      flowplayer.conf.hlsjs = {
        loader: GustLoader,
      };

      // initialize Flowplayer and play the video.
      var player = flowplayer("#video", {
        volume: 0,
        autoplay: true,
        clip: {
          sources: [{
            type: 'application/x-mpegurl',
            src: 'http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8',
          }]
        }
      });
      player.play();
    </script>
  </body>
</html>