SwarmCloud

vuePress-theme-reco SwarmCloud    2018 - 2022
P2P Streaming Engine P2P Streaming Engine

Choose mode

  • dark
  • auto
  • light
Documents
  • Introduction
  • Web SDK

    • HLS(m3u8)
    • Shaka-Player
    • dash.js
    • MP4
    • Downloader
  • Android/AndroidTV SDK

    • v3 (Kotlin, HLS only)
    • v2 (Java)
  • iOS/tvOS/macOS SDK
Pricing
Contact Us
Partnership
Ecosystem
Globe
Dashboard
GitHub (opens new window)
語言
  • English
  • 中文

Documents
  • Introduction
  • Web SDK

    • HLS(m3u8)
    • Shaka-Player
    • dash.js
    • MP4
    • Downloader
  • Android/AndroidTV SDK

    • v3 (Kotlin, HLS only)
    • v2 (Java)
  • iOS/tvOS/macOS SDK
Pricing
Contact Us
Partnership
Ecosystem
Globe
Dashboard
GitHub (opens new window)
語言
  • English
  • 中文
  • Introduction
  • FAQ
  • Tracking Service
  • Signaling Service
  • P2P Optimization
  • Dashboard

  • Web HLS SDK

  • Android SDK v2

  • Android SDK v3

  • iOS/tvOS/macOS SDK

  • Flutter SDK

  • Shaka-Player SDK

  • Hls.js SDK

    • Introduction
    • Usage
    • Player Integration
      • Hls.js
      • jwplayer
      • clappr
      • videojs
      • Playerjs
      • fluidplayer
      • flowplayer
      • Radiant Media Player
      • MediaElement.js
      • OpenPlayer
      • Plyr
      • DPlayer
      • Chimee
      • XGPlayer
      • ArtPlayer
    • API & Config
    • CDN
    • Change Log
  • HLS via ServiceWorker

  • Web MP4 SDK

  • Dash.js SDK

  • Web Downloader

  • More

Player Integration

vuePress-theme-reco SwarmCloud    2018 - 2022

Player Integration


SwarmCloud

# 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

  • Introduction to Hls.js (opens new window)
  • Online Demo (opens new window)
<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

  • Introduction to jwplayer (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to clappr (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to videojs (opens new window)
  • Online demo (opens new window)
<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. playerjs
<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

  • Introduction to fluidplayer (opens new window)
  • Online demo (opens new window)
<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

  • Introduction to flowplayer (opens new window)
  • Online demo (opens new window)
<!-- 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

  • Introduction to MediaElement.js (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to OpenPlayer (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to Plyr (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to DPlayer (opens new window)
  • Online demo (opens new window)
<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

  • Introduction to Chimee (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to XGPlayer (opens new window)
  • Online demo (opens new window)
<!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

  • Introduction to ArtPlayer (opens new window)
  • Online demo (opens new window)
<!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>