main

Branches (1)

Tags (12)

Manage

Manage

main

2.11.2

2.10.0

2.9.0

2.8.1

2.7.0

2.6.0

2.5.0

2.4.0

v2.3.0

2.2.0

2.1.0

v2.0.0

hls-p2p-engine
/
demo
/
videojs.html

<html>
<head>
    <title>CDNBye videojs demo</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/video-js.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.8.2/alt/video.core.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <!-- videojs-hls-quality-selector -->
    <script src="//cdn.jsdelivr.net/npm/videojs-contrib-quality-levels@2.0.9/dist/videojs-contrib-quality-levels.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/videojs-hls-quality-selector@1.1.1/dist/videojs-hls-quality-selector.min.js"></script>
    <!-- p2p-plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-hlsjs-plugin.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@swarmcloud/hls/p2p-engine.min.js"></script>
</head>
<body>
<video id=video width=600 height=300 class="video-js vjs-default-skin" controls>
</video>
<h3>download info:</h3>
<p id="info"></p>
<script>
    var p2pConfig = {
        logLevel: 'debug',
        swFile: './sw.js',
        live: false,        // set to true in live mode
        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
    };
    var options = {
        autoplay: true,
        sources:[
            {
                src: 'https://test-streams.mux.dev/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8',
            },
        ],
        html5: {
            hlsjsConfig: {
                // Put your hls.js config here
                // debug: true,
            }
        }
    };
    const initP2pEngine = (videojsPlayer, hlsjsInstance) => {
        if (P2PEngineHls.isSupported()) {
            new P2PEngineHls({
                hlsjsInstance,
                ...p2pConfig
            });
        }
    }
    if (videojs.Html5Hlsjs) {
        videojs.Html5Hlsjs.addHook('beforeinitialize', initP2pEngine);
        // videojs.Html5Hlsjs.removeHook('beforeinitialize', initP2pEngine);  // remove the hook function when leave page
    } else {
        // use ServiceWorker based p2p engine if hls.js is not supported, need additional file sw.js
        new P2PEngineHls.ServiceWorkerEngine(p2pConfig);
    }

    P2PEngineHls.tryRegisterServiceWorker(p2pConfig).then(() => {
        var player = videojs('video', options);
        player.hlsQualitySelector();
    })

</script>
</body>
</html>