quick-start.html

<script src="https://cdn.jsdelivr.net/npm/cdnbye-mp4@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>p2p info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script>
    document.querySelector('#version').innerText = `p2p version: ${P2PEngineMp4.version}`;
    var video = document.getElementById('video');
    var mp4 = new P2PEngineMp4(video, {
        autoplay: true,
        // controls: true,
        p2pConfig: {
            // logLevel: 'debug',
            pieceLength: 512*1024,
        }
    });
    mp4.loadSource('https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4');

    mp4.on('stats', function (stats) {
        var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
        document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%   saved traffic: ${Math.round(stats.totalP2PDownloaded)}KB upload: ${Math.round(stats.totalP2PUploaded)}KB`;
    })

    mp4.on('peers', function (peers) {
        document.querySelector('#peers').innerText = `peers: ${peers.length}`;
    })

</script>