VideoJS HLS Integration

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

Integration

Adding Styles

Add video.js css file to your head.

<link href="//static.peergust.com/video.js/dist/video-js.min.css" rel="stylesheet" />

Adding Video

Add a HLS playlist to HTML body.

<video
  class="video-js"
  preload="auto"
  width="640"
  height="264"
  controls
  data-setup="{}">
  <source
    src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
    type="application/x-mpegURL" />
</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 video.js and videojs-contrib-hls.

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

<!-- video.js hls plugin -->
<script src="//static.peergust.com/videojs-contrib-hls/dist/videojs-contrib-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/videojs.hls.js (hls support plugin for VideoJS) -->
<script src="//core.peergust.com/plugins/videojs.hls.js?key=YOUR_KEY"></script>

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Conclusion

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

Sample Configuration

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

    <main>
      <video class="video-js video"
        controls
        preload="auto"
        width="640"
        height="264"
        data-setup="{}">
        <source src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8"
          type="application/x-mpegURL" />
      </video>
    </main>

    <!-- VideoJS latest version & VideoJS Contrib HLS latest version -->
    <script src="//static.peergust.com/video.js/dist/video.min.js"></script>
    <script src="//static.peergust.com/videojs-contrib-hls/dist/videojs-contrib-hls.min.js"></script>

    <!-- GustJS & GustJS VideoJS HLS 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/videojs.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);
    </script>
  </body>
</html>