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

  • HLS via ServiceWorker

  • Web MP4 SDK

  • Dash.js SDK

    • Introduction
    • Usage
    • Player Integration
      • Dash.js
      • videojs
      • flowplayer
      • DPlayer
      • Plyr
    • API & Config
    • Change Log
  • Web Downloader

  • More

Player Integration

vuePress-theme-reco SwarmCloud    2018 - 2022

Player Integration


SwarmCloud

# Dash.js

  • Introduction to Dash.js (opens new window)
  • Online Demo (opens new window)
<html>
<video id="videoPlayer" controls></video>
<p id="version"></p>
<h3>download info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script src="https://cdn.dashjs.org/v3.1.3/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@latest"></script>
<script>
    var url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
    var player = dashjs.MediaPlayer().create()
    document.querySelector('#version').innerText = `dash.js version: ${player.getVersion()} p2p version: ${P2PEngineDash.version}`;
    var p2pConfig = {
        logLevel: 'debug',
        // announceLocation: 'hk',        // if using Hongkong tracker
        // announceLocation: 'us',        // if using USA tracker
    }
    var engine = new P2PEngineDash(player, p2pConfig);
    player.initialize(document.querySelector("#videoPlayer"), url, true);
    engine.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`;
    })
    engine.on('peers', function (peers) {
        document.querySelector('#peers').innerText = `peers: ${peers.length}`;
    })
</script>
</html>

# Introduction

CDNBye can be integrated into any HTML5 video player, here are some examples.

# videojs

  • Introduction to videojs (opens new window)
  • Online Demo (opens new window)
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
<!-- Dash.js -->
<script src="https://cdn.dashjs.org/v3.1.3/dash.all.min.js"></script>
<!-- cdnbye dash.js plugin script -->
<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@latest"></script>
<!-- videojs-contrib-dash script -->
<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@latest/dist/videojs-dash.min.js"></script>
<script>
    var player = videojs('example-video', {
        html5: {
            dash: {
                // dash.js options
            }
        }
    });
    player.ready(function() {
        player.src({
            src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
            type: 'application/dash+xml'
        });
        player.play();
    });
    var myCustomCallback = function(player, mediaPlayer) {
        var p2pConfig = {
            // logLevel: 'debug',
            // announceLocation: 'hk',        // if using Hongkong tracker
            // announceLocation: 'us',        // if using USA tracker
        };
        var engine = new P2PEngineDash(mediaPlayer, p2pConfig);
    };
    videojs.Html5DashJS.hook('beforeinitialize', myCustomCallback);
</script>

# flowplayer

  • Introduction to flowplayer (opens new window)
<!-- head section -->
<!-- skin -->
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<!-- CDNBye plugin -->
<script src="//cdn.jsdelivr.net/npm/cdnbye-dash@latest"></script>
<!-- flowplayer -->
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/dash.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 = `cdnbye version: ${P2PEngineDash.version}`;
    var player = flowplayer('#player', {
            src: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
        }
    )
    var engine = new P2PEngineDash(player.dash, {
        // logLevel: "debug",
        // announceLocation: 'hk',        // if using Hongkong tracker
        // announceLocation: 'us',        // if using USA tracker
    });
    engine.on('stats', function (stats) {
        var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
        document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%, saved traffic: ${stats.totalP2PDownloaded}KB, uploaded: ${stats.totalP2PUploaded}KB`;
    })
</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.dashjs.org/v3.1.3/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@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(P2PEngineDash.isSupported()) {
        type = 'customDash';
    }
    const dp = new DPlayer({
        container: document.getElementById('dplayer'),
        autoplay: true,
        video: {
            url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
            type: type,
            hotkey: true,        // 移动端全屏时向右划动快进,向左划动快退。
            customType: {
                'customDash': function (video) {
                    var player = dashjs.MediaPlayer().create();
                    var p2pConfig = {
                        // logLevel: 'debug',
                        // announceLocation: 'hk',        // if using Hongkong tracker
                        // announceLocation: 'us',        // if using USA tracker
                    }
                    var engine = new P2PEngineDash(player, p2pConfig);
                    player.initialize(video, video.src, true);
                    engine.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 = 'CDNBye P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
            + 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
        document.getElementById('stats').innerText = text
    }
</script>

# Plyr

  • Introduction to Plyr (opens new window)
  • Online demo (opens new window)
<div class="container">
    <video controls crossorigin playsinline></video>
</div>
<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="https://cdn.dashjs.org/v3.2.1/dash.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye-dash@latest"></script>
<style>
    .container {
        margin: 50px auto;
        max-width: 1500px;
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const source = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';
        // For more dash options, see https://github.com/Dash-Industry-Forum/dash.js
        const dash = dashjs.MediaPlayer().create();
        if (P2PEngineDash.isSupported()) {
            var p2pConfig = {
                // logLevel: 'debug',
                // announceLocation: 'hk',        // if using Hongkong tracker
                // announceLocation: 'us',        // if using USA tracker
                // Other p2pConfig options if applicable
            };
            var engine = new P2PEngineDash(dash, p2pConfig);
            engine.on('stats', function (stats) {
                var total = stats.totalHTTPDownloaded + stats.totalP2PDownloaded;
                document.querySelector('#info').innerText = `p2p ratio: ${Math.round(stats.totalP2PDownloaded/total*100)}%, saved traffic: ${stats.totalP2PDownloaded}KB, uploaded: ${stats.totalP2PUploaded}KB`;
            })
        }
        const video = document.querySelector('video');
        dash.initialize(video, source, true);
        // Update caption tracks after initializing Plyr to get the generated captions
        // For more options see: https://github.com/sampotts/plyr/#options
        const player = new Plyr(video, {captions: {active: true, update: true}});
        // Expose player and dash so they can be used from the console
        window.player = player;
        window.dash = dash;
    });
</script>