Skip to content

Hls.js with Peer5 for HLS integration




Hls.js is an open source HLS player.

The integration with Peer5 plugin is as easy as it can get.
In addition to the player script, include the Peer5 client and the Peer5 hls.js plugin.

Peer5 client and plugins scripts

Add the following two scripts to the head of your player's page, based on your player version:

Hls.js v0.x or v1.x

1
2
<script src="https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
<script src="https://api.peer5.com/peer5.hlsjs.plugin.js"></script>

Complete Example (Hls.js v1.0.0)

The following information needs to be filled according to your actual data:

  • PEER5_CUSTOMER_ID   your Peer5 Customer ID
  • MANIFEST_FILE   url to your .m3u8 file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hls.js Demo</title>
    <!-- Peer5 scripts -->
    <script src="https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
    <script src="https://api.peer5.com/peer5.hlsjs.plugin.js"></script>

    <!-- Player scripts -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@1.0.0/dist/hls.min.js"></script>
</head>
<body>
    <video id="player"></video>
    <script>
      if (Hls.isSupported()) {
        var video = document.getElementById('player');
        var player = new Hls();
        player.attachMedia(video);
        player.on(Hls.Events.MEDIA_ATTACHED, function() {
          player.loadSource('MANIFEST_FILE');
          player.on(Hls.Events.MANIFEST_PARSED, function() {
            video.play();
          });
        });
      } else {
        console.error('Hls.js is not supported in this browser');
      }
    </script>
</body>
</html>

Visit the full Hls.js docs here

To test that you integrated with Peer5 correctly, and to see stats about what the Peer5 integration is doing, you can view the stats overlay.

Custom Hls.js Based players

Its also possible to integrate Peer5 with custom players that are based on Hls.js.
If you use bundled setup where Hls.js is required without being exposed globally, use this alternative setup:

include these scripts

1
2
<script src="https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
<script src="https://api.peer5.com/peer5.hlsjs.loader.js"></script>

then pass the peer5 loader to Hls.js constructor 

1
2
3
4
5
var Hls = require('hls.js');
var instance = new Hls({
  fLoader: window.peer5 && window.peer5.HlsJsFragmentLoader,
  pLoader: window.peer5 && window.peer5.HlsJsPlaylistLoader
});

or using es6 syntax

1
2
3
4
5
import Hls from 'hls.js';
const instance = new Hls({
  fLoader: window.peer5 && window.peer5.HlsJsFragmentLoader,
  pLoader: window.peer5 && window.peer5.HlsJsPlaylistLoader
});