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 = [ "//api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID", // use your customer id "//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('http://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([ '//api.peer5.com/peer5.js?id=PEER5_CUSTOMER_ID', // use your customer id '//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.