Theoplayer with Peer5 for HLS integration¶

THEOplayer is a feature rich video player that supports HLS.

The integration with Peer5 plugin is easy and involves just two lines of code. In addition to the player script, simply include the Peer5 client and the matching Peer5 THEOplayer plugin based on your player version.

Peer5 client and plugins scripts¶

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

THEOplayer v2.x¶

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

THEOplayer v1.x¶

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

Complete Example (THEOplayer v2.x)¶

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

also replace the '/path/to' (3 location overall) with your theoplayer library location link.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>THEOplayer Demo</title>
    <!-- Peer5 scripts -->
    <script src="https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID"></script>
    <script src="https://api.peer5.com/peer5.theoplayer2.plugin.js"></script>

    <!-- Player scripts -->
    <script type="text/javascript" src="/path/to/THEOplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="/path/to/ui.css" />
</head>
<body>
    <div id="player">
      <video id="video" controls></video>
    </div>
    <script>
        var player = THEOplayer(document.getElementById('player'),{
            libraryLocation : '/path/to/your-theoplayer-folder/'
        });
        player.source = {
          sources: [{
              src: 'MANIFEST_FILE',
              type: 'application/x-mpegurl'
          }]
        };
    </script>    
</body>
</html>

Visit the full Theoplayer 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.