Skip to content

Embedding Peer5 in a script

Embedding Peer5 in a script

Peer5 is usually integrated by adding two script tags into your HTML. This is the standard and simple way to load Peer5, but sometimes this is not possible. For example, you are developing a custom player that is written Javascript and embedded as a single tag into various pages. Often, you cannot change those pages and therefore cannot add the Peer5 tags. In those cases we recommend loading Peer5 dynamically from your Javascript.

This guide shows how to load Peer5 dynamically from within another script.

Example

index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedded Peer5 example</title>
</head>
<body>
    <div id="player"></div>
    <script src="//cdn.jsdelivr.net/clappr/latest/clappr.min.js"></script>
    <script src="my-video-player.js"></script>
</body>
</html>
my-video-player.js
 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
32
function loadScript(script, cb) {
    var scripts = Array.isArray(script) ? script.slice() : [script];
    var scriptUrl = scripts.shift();
    if (!scriptUrl) return cb();

    var scriptTag = document.createElement('script');
    scriptTag.src = scriptUrl;
    scriptTag.onload = function onLoad() {
        loadScript(scripts, cb);
    };
    scriptTag.onerror = function onError() {
        cb(true);
    };
    (document.head || document.body).appendChild(scriptTag);
}

var scriptsList = [
    "https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID", // use your customer id
    "https://api.peer5.com/peer5.clappr.plugin.js"         // replace with the relevant player plugin
];

loadScript(scriptsList, function onPeer5Ready(err) {
    if (err) {
        // error loading one of the scripts
    }

    // player should initiated only after peer5 is loaded
    var player = new Clappr.Player({
        source: 'MANIFEST_FILE',
        parentId: '#player'
    });
});

The second script loads Peer5 scripts dynamically and calls onPeer5Ready callback function once Peer5 scripts has been loaded.

SPA Example

If you have a Single Page Application and you build your code with a bundle, you can use the following code to load Peer5 before loading your player.

app.js
1
2
3
4
import initPlayer from 'init-player-with-peer5';


initPlayer('https://example.com/hls/playlist.m3u8');
init-player-with-peer5.js
 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
32
33
34
35
36
37
38
39
40
41
42
43
44
import Clappr from 'clappr';

// Important - expose Clappr globally for peer5 plugin
window.Clappr = Clappr;

function loadScript(script) {
    return new Promise((resolve, reject) => {
        const scripts = Array.isArray(script) ? script.slice() : [script];

        function loadLoop() {
            const scriptUrl = scripts.shift();
            if (!scriptUrl) return resolve();

            const scriptTag = document.createElement('script');
            scriptTag.src = scriptUrl;
            scriptTag.onload = () => loadLoop();
            scriptTag.onerror = reject;
            document.body.appendChild(scriptTag);
        }

        loadLoop();
    });
}

const scriptsLoadPromise = loadScript([
    'https://api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID', // use your customer id
    'https://api.peer5.com/peer5.clappr.plugin.js'         // replace with the relevant player plugin
]);

export default function initPlayer(source) {
    return scriptsLoadPromise
    .catch(err => {
        // one of the scripts error - print the error and load the player anyway
        console.error(err);
    })
    .then(() => {
        // Important - use global Clappr that was integrated with peer5
        return new window.Clappr.Player({
            source,
            parentId: '#player'
        });
    });

}

If you have any questions about integrating, please chat with us or send us an email.