<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/@swarmcloud/hls/p2p-engine.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/default/flowplayer.min.js"></script>

<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/chromecast.min.js"></script>
<div id="player"></div>
<h3>download info:</h3>
<p id="info"></p>
<script>
    var p2pConfig = {
        logLevel: 'debug',
        live: false,        // set to true in live mode
        swFile: './sw.js',
        getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
            var total = totalHTTPDownloaded + totalP2PDownloaded;
            document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
        },
        // trackerZone: 'hk',        // if using Hongkong tracker
        // trackerZone: 'us',        // if using USA tracker
        // token: YOUR_TOKEN
        // Other p2pConfig options provided by CDNBye
    }

    P2PEngineHls.tryRegisterServiceWorker(p2pConfig).then(() => {
        window.player = flowplayer("#player", {
            token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w",
            src    : "https://test-streams.mux.dev/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8",
            title  : "flowplayer / hls",
            hls: {
                debug: false,
                // Other hlsjsConfig options provided by hls.js
            }
        })
        player.on('loadstart', () => {
            p2pConfig.hlsjsInstance = player.hls
            new P2PEngineHls(p2pConfig)
        })
    })

</script>