Player Integration

# Introduction

CDNBye can be integrated into any HTML5 video player with hls.js built in.

If your player do not use hls.js to decode stream, please consider use the SDK based on ServiceWorker.

# Hls.js

<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<video id="video" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    var video = document.getElementById('video');
    var source = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
    if(Hls.isSupported()) {
        var hls = new Hls({
            p2pConfig: {
                live: true,        // set false in VOD mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                // Other p2pConfig options provided by CDNBye
            }
        });
        hls.loadSource(source);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED,function() {
            video.play();
        });
        hls.p2pEngine.on('stats', function ({totalHTTPDownloaded, totalP2PDownloaded, totalP2PUploaded}) {
            var total = totalHTTPDownloaded + totalP2PDownloaded;
            document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB, uploaded: ${totalP2PUploaded}KB`;
        });
    }
    // This is using the built-in support of the plain video element, without using hls.js.
    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = source;
        video.addEventListener('loadedmetadata',function() {
            video.play();
        });
    }
</script>

# jwplayer

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CDNBye JWPlayer Demo</title>
    <!-- CDNBye Plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
    <!-- JWPlayer Hlsjs Provider -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/jwplayer.provider.hls.js"></script>
    <!-- JW Player Builds -->
    <script src="//ssl.p.jwpcdn.com/player/v/8.21.2/jwplayer.js"></script>
</head>
<body>
<header></header>
<center>
    <div id="demoplayer"></div>
</center>
<script>
    jwplayer.key = "uoW6qHjBL3KNudxKVnwa3rt5LlTakbko9e6aQ6VUyKQ=";
    jwplayer('demoplayer').setup({
        file: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
        width: 512,
        height: 288,
        autostart: true,
        hlsjsConfig: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                live: true,        // set false in vod mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                // Other p2pConfig options provided by CDNBye
            }
        },
    });
    jwplayer().on('play', function () {
        jwplayer().hls.p2pEngine.on('stats', function ({totalHTTPDownloaded, totalP2PDownloaded}) {
            // get totalHTTPDownloaded and totalP2PDownloaded here
        })
    })
</script>
</body>
</html>

# clappr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye Clappr Demo</title>
    <!-- Clappr Builds -->
    <script src="//cdn.jsdelivr.net/npm/@clappr/player@0.4.7/dist/clappr.min.js"></script>
    <!-- CDNBye P2PEngine -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
    <!-- CDNBye Clappr Plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/clappr-plugin.min.js"></script>
</head>
<body>
<div id="player"></div>
<script>
    var player = new Clappr.Player(
        {
            source: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8",
            parentId: "#player",
            autoPlay: true,
            plugins: [CDNByeClapprPlugin],
            playback: {
                hlsjsConfig: {
                    maxBufferSize: 0,      // Highly recommended setting in live mode 
                    maxBufferLength: 10,   // Highly recommended setting in live mode
                    liveSyncDurationCount: 10,  // Highly recommended setting in live mode
                    // Other hlsjsConfig options provided by hls.js
                    p2pConfig: {
                        live: true,        // set false in vod mode
                        // announceLocation: 'hk',        // if using Hongkong tracker
                        // announceLocation: 'us',        // if using USA tracker
                        // Other p2pConfig options provided by CDNBye
                    }
                }
            }
        });
</script>
</body>
</html>

# videojs

<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@0.14.13"></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>
    <!-- cdnbye-p2p-plugin -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-hlsjs-plugin.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
</head>
<body>
<video id=video width=600 height=300 class="video-js vjs-default-skin" controls>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    var options = {
        autoplay: true,
        sources:[
            {
                src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
            },
        ],
        html5: {
            hlsjsConfig: {
                // Put your hls.js config here
                // debug: true,
                maxBufferSize: 0,
                maxBufferLength: 10,
                liveSyncDurationCount: 10,
            }
        }
    };
    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
        if (P2PEngine.isSupported()) {
            var engine = new P2PEngine(hlsjsInstance, {
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                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`;
                },
            });
        }
    });
    var player = videojs('video', options);
    player.hlsQualitySelector();
</script>
</body>
</html>

# Playerjs

Introduction to Playerjs (opens new window)
Online demo (opens new window)
Simply disable the HLS plugin in the builder and connect it separately with script tag on the page before connecting the player.

<div id="player"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//site.com/playerjs.js" type="text/javascript"></script>
<script>
    var player = new Playerjs({
        id: "player",
        file: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8",
        hlsconfig: {
            p2pConfig: {
                live: true,        // set false in VOD mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
            }
        }
    });
</script>

# fluidplayer

<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
<video id='hls-video'>
    <source src='https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8' type='application/x-mpegURL'/>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    fluidPlayer(
        'hls-video',
        {
            layoutControls: {
                fillToContainer: true
            },
            modules: {
                configureHls: (options) => {
                    options.p2pConfig = {
                        live: true,        // set false in VOD mode
                        // announceLocation: 'hk',        // if using Hongkong tracker
                        // announceLocation: 'us',        // if using USA tracker
                        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`;
                        },
                        // Other p2pConfig options provided by CDNBye
                        // http://www.cdnbye.com/en/views/web/API.html
                    };
                    return options;
                },
            }
        }
    );
</script>

# flowplayer

<!-- head section -->
<!-- skin -->
<link rel="stylesheet" href="https://releases.flowplayer.org/7.2.6/skin/skin.css">
<!-- CDNBye hls.js -->
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hls.light.min.js"></script>
<!-- flowplayer -->
<script src="//releases.flowplayer.org/7.2.6/flowplayer.min.js"></script>
<!-- body section -->
<div id="player"></div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    flowplayer('#player', {
        live: true,  // set if it's a live stream
        ratio: 9/16, // set the aspect ratio of the stream
        clip: {
            sources: [
                // path to the HLS m3u8
                { type: "application/x-mpegurl", src: "https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"},
            ]
        },
        hlsjs: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                live: true,        // set false in vod mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                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`;
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    });
</script>

# Radiant Media Player

Introduction to Radiant Media Player (opens new window)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<script src="https://cdn.radiantmediatechs.com/rmp/7.8.1/js/rmp.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
<div id="rmp"></div>
<script>
    const src = {
        hls: 'https://test-streams.mux.dev/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8'
    };
    // config for p2p
    var p2pConfig = {
        live: true,
        // announceLocation: 'hk',        // if using Hongkong tracker
        // announceLocation: 'us',        // if using USA tracker
    }
    const settings = {
        licenseKey: 'your-license-key',
        src: src,
        width: 640,
        height: 360,
        forceHlsJSOnIpadOS: true,
    };
    const elementID = 'rmp';
    const rmp = new RadiantMP(elementID);
    const container = document.getElementById(elementID);
    container.addEventListener('hlsinstancecreated', () => {
        const hlsJSInstance = rmp.getHlsJSInstance();
        if (P2PEngine.isSupported()) {
            new P2PEngine(hlsJSInstance, p2pConfig);
        }
    });
    rmp.init(settings);
</script>
</body>
</html>

# MediaElement.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye MediaElement Demo</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mediaelement@latest/build/mediaelementplayer.min.css">
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
    <script src="//cdn.jsdelivr.net/npm/mediaelement@4.2.16/build/mediaelement-and-player.min.js"></script>
</head>
<body>
<video id="player"
       src="https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"
       class="mejs__player"
       controls>
</video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    var player = new MediaElementPlayer('player', {
        hls: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                live: true,        // set false in vod mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                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`;
                },
                // Other p2pConfig options provided by CDNBye
            }
        },
        success: function (me) {
            me.play();
        }
    });
</script>
</body>
</html>

# OpenPlayer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye OpenPlayer Demo</title>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.css">
</head>
<body>
<video class="op-player__media" id="video" controls playsinline>
    <source src="https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8"></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/openplayerjs@2.0.0"></script>
</body>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    var player = new OpenPlayer('video', {
        hls: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                live: true,        // set false in vod mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                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`;
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    });
    player.init();
</script>
</html>

# Plyr

<!DOCTYPE html>
<html lang="en">
<div class="container">
    <video controls crossorigin playsinline></video>
</div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<link rel="stylesheet" href="//cdn.plyr.io/3.4.7/plyr.css">
<script src="//cdn.plyr.io/3.4.7/plyr.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    document.addEventListener('DOMContentLoaded', () => {
        var source = 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8';
        var video = document.querySelector('video');
        // For more options see: https://github.com/sampotts/plyr/#options
        // captions.update is required for captions to work with hls.js
        var player = new Plyr(video, {
            captions: {active: true, update: true, language: 'en'},
            // autoplay: true,
        });
        if (!Hls.isSupported()) {
            video.src = source;
        } else {
            // For more Hls.js options, see https://github.com/dailymotion/hls.js
            var hls = new Hls({
                p2pConfig: {
                    live: true,        // set false in vod mode
                    // announceLocation: 'hk',        // if using Hongkong tracker
                    // announceLocation: 'us',        // if using USA tracker
                    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`;
                    },
                    // Other p2pConfig options provided by CDNBye
                }
            });
            hls.loadSource(source);
            hls.attachMedia(video);
            window.hls = hls;
            // Handle changing captions
            player.on('languagechange', () => {
                // Caption support is still flaky. See: https://github.com/sampotts/plyr/issues/994
                setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
            });
        }
        // Expose player so it can be used from the console
        window.player = player;
    });
</script>

# DPlayer

<meta charset="UTF-8">
<style type="text/css">
    body,html{width:100%;height:100%;background:#000;padding:0;margin:0;overflow-x:hidden;overflow-y:hidden}
    *{margin:0;border:0;padding:0;text-decoration:none}
    #stats{position:fixed;top:5px;left:10px;font-size:12px;color:#fdfdfd;z-index:2147483647;text-shadow:1px 1px 1px #000, 1px 1px 1px #000}
    #dplayer{position:inherit}
</style>
<div id="dplayer"></div>
<div id="stats"></div>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0"></script>
<script>
    var _peerId = '', _peerNum = 0, _totalP2PDownloaded = 0, _totalP2PUploaded = 0;
    var type = 'normal';
    if(Hls.isSupported() && Hls.WEBRTC_SUPPORT) {
        type = 'customHls';
    }
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: true,
        video: {
            url: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
            type: type,
            customType: {
                'customHls': function (video, player) {
                    const hls = new Hls({
                        debug: false,
                        // Other hlsjsConfig options provided by hls.js
                        p2pConfig: {
                            live: true,        // set false in VOD mode
                            // announceLocation: 'hk',        // if using Hongkong tracker
                            // announceLocation: 'us',        // if using USA tracker
                            // Other p2pConfig options provided by CDNBye
                        }
                    });
                    hls.loadSource(video.src);
                    hls.attachMedia(video);
                    hls.p2pEngine.on('stats', function (stats) {
                        _totalP2PDownloaded = stats.totalP2PDownloaded;
                        _totalP2PUploaded = stats.totalP2PUploaded;
                        updateStats();
                    }).on('peerId', function (peerId) {
                        _peerId = peerId;
                    }).on('peers', function (peers) {
                        _peerNum = peers.length;
                        updateStats();
                    });
                }
            }
        }
    });
    function updateStats() {
        var text = 'P2P have downloaded' + (_totalP2PDownloaded/1024).toFixed(2)
            + 'MB shared ' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' connected ' + _peerNum + ' peers';
        document.getElementById('stats').innerText = text
    }
</script>

# Chimee

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CDNBye Chimee Demo</title>
    <!-- Chimee Builds -->
    <script src="//cdn.jsdelivr.net/npm/chimee@0.11.0/lib/index.browser.min.js"></script>
    <!-- CDNBye P2PEngine -->
    <script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/hlsjs-p2p-engine.min.js"></script>
    <!-- Chimee HLS Kernel -->
    <script src="//cdn.jsdelivr.net/npm/p2p-chimee-kernel-hls@latest"></script>
</head>
<body>
<div id="player"></div>
<h3>download info:</h3>
<p id="info"></p>
<script>
    new Chimee({
        wrapper: '#player',  // video dom容器
        src: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
        controls: true,
        kernels: {
            hls: {
                maxBufferSize: 0,          // Highly recommended setting in live mode
                maxBufferLength: 10,       // Highly recommended setting in live mode
                liveSyncDurationCount: 10, // Highly recommended setting in live mode
                handler: window.ChimeeKernelHls,
                p2pConfig: {
                    live: true,        // set false in VOD mode
                    // announceLocation: 'hk',        // if using Hongkong tracker
                    // announceLocation: 'us',        // if using USA tracker
                    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`;
                    },
                    // Other p2pConfig options provided by CDNBye
                }
            }
        },
    });
</script>
</body>
</html>

# XGPlayer

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>CDNBye XGPlayer Demo</title>
    <style type="text/css">
        html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
        body {display:flex;}
        #mse {flex:auto;}
    </style>
    <script type="text/javascript">
        window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
    </script>
</head>
<body>
<div id="mse"></div>
<script src="//cdn.jsdelivr.net/npm/xgplayer@2.30.2/browser/index.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest/dist/xgplayer-hlsjs.min.js"></script>
<script type="text/javascript">
    new window.HlsJsPlayer({
        id: 'mse',
        url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
        autoplay: true,
        useHls: true,
        playsinline: true,
        height: window.innerHeight,
        width: window.innerWidth,
        hlsOpts: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                live: true,        // set false in VOD mode
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
                    console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    });
</script>
</body>
</html>

# ArtPlayer

<!DOCTYPE html>
<html>
<head>
    <title>ArtPlayer</title>
    <meta charset="UTF-8" />
</head>
<body>
<div class="artplayer-app" style="width:400px;height:300px"></div>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
<script>
    var art = new Artplayer({
        container: '.artplayer-app',
        url: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',
        customType: {
            m3u8: function (video, url) {
                var hls = new Hls({
                    p2pConfig: {
                        live: true,          // set false in VOD mode
                        // announceLocation: 'hk',        // if using Hongkong tracker
                        // announceLocation: 'us',        // if using USA tracker
                        getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
                            console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
                        },
                        // Other p2pConfig options provided by CDNBye
                    }
                });
                hls.loadSource(url);
                hls.attachMedia(video);
            },
        },
    });
</script>
</body>
</html>

SwarmCloud

Choose mode

Player Integration

# Introduction

# Hls.js

# jwplayer

# clappr

# videojs

# Playerjs

# fluidplayer

# flowplayer

# Radiant Media Player

# MediaElement.js

# OpenPlayer

# Plyr

# DPlayer

# Chimee

# XGPlayer

# ArtPlayer