Tinyplayer Integration

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

Integration

Please see Tinyplayer documentation page before continue.

Adding Video

Add a video to HTML body.

<video
  id="video"
  autoplay>
   <source
    src="frag_bunny.mp4"
    type='application/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Adding Scripts

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

gust.js

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

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

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

Initialize Gust

Also see details of Gust Object

<script>
  Gust();
</script>

Initialize Video

<script>
  var video = document.getElementById("video");
  Tinyplayer(video);
</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="/assets/video.js/dist/video-js.min.css" rel="stylesheet">
    <style>
      .title {
        font-family: sans-serif;
      }
      .video {
        width: 540px;
      }
    </style>
  </head>
  <body>
    <h3 class="title">Tinyplayer</h3>

    <main>
      <video
        id="video"
        class="video"
        width="640"
        height="264"
        poster="http://vjs.zencdn.net/v/oceans.png"
        muted
        controls
        autoplay>
         <source
          src="../assets/frag_bunny.mp4"
          type='application/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
       </video>
    </main>

    <!-- NOTE: replace the keys with your own -->

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

    <!-- GustJS -->
    <script src="//core.peergust.com/gust.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 Tinyplayer
      var video = document.getElementById("video");
      Tinyplayer(video);
    </script>
  </body>
</html>