Player Integration | P2P Streaming Engine

# Introduction

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

# 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: {
                logLevel: false,
                live: true,        // set to false in VOD mode
                // 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>

# 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, {
                // logLevel: 'debug',
                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>

# 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: {
                logLevel: true,
                live: true,        // set as false in vod 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`;
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    });
</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,        // 如果是点播设为false
                // 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.0/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: {
                        logLevel: 'debug',
                        live: true,        // set as false in vod mode
                        // Other p2pConfig options provided by CDNBye
                    }
                }
            }
        });
</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: {
                logLevel: true,
                live: true,        // set as false in vod 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`;
                },
                // 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: {
                logLevel: 'debug',
                live: true,        // set to false in vod 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`;
                },
                // 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: {
                    logLevel: true,
                    live: true,        // set as false in vod 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`;
                    },
                    // 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>

# 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: {
                logLevel: true,
                live: true,        // set to false in VOD mode
            }
        }
    });
</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 = {
                        logLevel: true,
                        live: true,        // set to false in VOD 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`;
                        },
                        // Other p2pConfig options provided by CDNBye
                        // http://www.cdnbye.com/en/views/web/API.html
                    };
                    return options;
                },
            }
        }
    );
</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: {
                            logLevel: 'debug',
                            live: true,        // set to false in VOD mode
                            // 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>

# CKPlayer

<!DOCTYPE html>
<html>
<body>
<div id="video" style="width: 100%; height: 400px;max-width: 600px;"></div>
<h3>download info:</h3>
<p id="info"></p>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/p2p-ckplayer@latest/ckplayer/ckplayer.min.js" charset="UTF-8"></script>
<script type="text/javascript">
    var videoObject = {
        container: '#video',  // “#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',   // 该属性必需设置，值等于下面的new chplayer()的对象
        autoplay:true,
        html5m3u8:true,       // 强制html5播放
        video:'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',//视频地址
        hlsjsConfig: {   // hlsjs和CDNBye的配置参数
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                logLevel: 'debug',
                live: true,        // set to false in VOD 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`;
                },
                // Other p2pConfig options provided by CDNBye
                // https://docs.cdnbye.com/#/en/API
            }
        }
    };
    var player = new ckplayer(videoObject);
</script>
</body>
</html>

# TCPlayer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>CDNBye TCPlayer Demo</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="msapplication-tap-highlight" content="no">
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="video-container" style="margin: 0px auto;">
</div>
<p id="version"></p>
<h3>download info:</h3>
<p id="info"></p>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.3.js"></script>
<script>
    document.querySelector('#version').innerText = `hls.js version: ${Hls.version}  cdnbye version: ${Hls.engineVersion}`;
    var options = {
        m3u8: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8' ,
        autoplay: true,
        live: true,
        width: '480',
        height: '320',
        hlsConfig: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                logLevel: true,
                live: true,        // set to false in VOD 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`;
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    };
    var player = new TcPlayer('video-container', options);
    window.qcplayer = player;
</script>
</body>
</html>

# 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: {
                    logLevel: 'debug',
                    live: true,        // set to false in VOD 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`;
                    },
                    // 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@1.1.4-beta.3/browser/index.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="//cdn.jsdelivr.net/npm/p2p-xgplayer-hlsjs@latest"></script>
<script type="text/javascript">
    new window.HlsJsPlayer({
        id: 'mse',
        url: '//video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
        autoplay: true,
        playsinline: true,
        height: window.innerHeight,
        width: window.innerWidth,
        useHls: true,
        hlsOpts: {
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                logLevel: true,
                live: true,        // set to false in VOD mode
                getStats: function (totalP2PDownloaded, totalP2PUploaded, totalHTTPDownloaded) {
                    console.log(`totalP2PDownloaded ${totalP2PDownloaded} totalP2PUploaded ${totalP2PUploaded} totalHTTPDownloaded ${totalHTTPDownloaded}`)
                },
                // Other p2pConfig options provided by CDNBye
            }
        }
    });
</script>
</body>
</html>

# CHPlayer

<!DOCTYPE html>
<html>
<body>
<div id="video" style="width: 100%; height: 400px;max-width: 600px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p2p-chplayer@latest/chplayer/chplayer.min.js" charset="UTF-8"></script>
<script type="text/javascript">
    var videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        autoplay: true,
        html5m3u8: true,
        video: 'https://test-streams.mux.dev/x36xhzz/url_8/193039199_mp4_h264_aac_fhd_7.m3u8',//视频地址
        hlsjsConfig: {   // hlsjs和CDNBye的配置参数
            debug: false,
            // Other hlsjsConfig options provided by hls.js
            p2pConfig: {
                logLevel: true,
                live: true,        // set to false in VOD mode
                // Other p2pConfig options provided by CDNBye
                // https://github.com/cdnbye/hlsjs-p2p-engine/blob/master/docs/%E4%B8%AD%E6%96%87/API.md
            }
        }
    };
    var player = new chplayer(videoObject);
</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: {
                        logLevel: false,
                        live: true,          // set to false in VOD mode
                        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>