第三方播放器 | P2P流媒体引擎

# 简介

本插件是以 shaka-player 作为播放内核的，所以可以集成到内置 shaka-player 的任何H5视频播放器中！以下为部分播放器集成示例，当然您也可以尝试集成到其他播放器中。

# Shaka-Player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shaka Player with P2P Engine (HLS or MPEG-DASH)</title>
    <script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
</head>
<body>
<video id="video" width="640" controls autoplay></video>
<p id="version"></p>
<h3>p2p info:</h3>
<p id="peers"></p>
<p id="info"></p>
<script>
    shaka.polyfill.installAll();
    document.querySelector('#version').innerText = `p2p version: ${P2PEngineShaka.version}`;

    var video = document.getElementById("video");
    var player = new shaka.Player(video);
    var onError = function(error) { console.error("Error code", error.code, "object", error); }
    player.addEventListener("error", function(event) { onError(event.detail); });

    if (P2PEngineShaka.isSupported()) {
        var engine = new P2PEngineShaka(player, {
            // logLevel: 'debug',
        });
        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}`;
        })
    }

    player.load(
        "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
    ).catch(onError);
</script>
</body>
</html>

# CBPlayer

<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="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cbplayer2@latest"></script>
<script>
    var cb = new CBPlayer({
        container: document.getElementById('dplayer'),
        playState: true,   // 记忆播放
        autoplay: true,
        video: {
            url: 'https://bitmovin-a.akamaihd.net/content/MI20192708/stream.mpd',
        },
        pluginOptions: {
            shaka: {
                p2pConfig: {
                    // logLevel: 'debug',
                    // Other p2pConfig options provided by CDNBye
                }
            }
        },
    });
</script>

# Clappr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Clappr player with shaka-p2p-engine (MPEG-DASH only)</title>
    <script src="//cdn.jsdelivr.net/npm/@clappr/player@0.4.0/dist/clappr.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
    <script src="//cdn.jsdelivr.net/gh/clappr/dash-shaka-playback@latest/dist/dash-shaka-playback.external.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
    <style>
        #video {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>
<body>
<div id="video"></div>
<script>

    var player = new Clappr.Player({
        parentId: "#video",
        source: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
        plugins: [DashShakaPlayback],
        shakaOnBeforeLoad: function(shakaPlayerInstance) {
            if (P2PEngineShaka.isSupported()) {
                new P2PEngineShaka(shakaPlayerInstance, {
                    logLevel: 'debug',
                });
            }
        }
    });
    player.play();

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

# videojs

<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="https://cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
<script src="https://vjs.zencdn.net/5.19.2/video.js"></script>
<script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-shaka@0.4.5/dist/videojs-shaka.min.js"></script>
<script>
    var player = videojs('example-video', {
        techOrder: ['shaka'],
        // shaka: {
        //     debug: true
        // }
    });
    new P2PEngineShaka(player.tech_.shaka_, {
        logLevel: 'debug'
    })
    player.ready(function() {
        player.src({
            src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
            type: 'application/dash+xml'
        });
        player.play();
    });
</script>

# DPlayer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DPlayer with shaka-p2p-engine</title>
    <script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
    <script src="//cdn.jsdelivr.net/npm/dplayer@1.26.0"></script>
    <style>
        #dplayer {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>
<body>
<div id="dplayer"></div>
<script>
    shaka.polyfill.installAll();

    window.dp = new DPlayer({
        container: document.getElementById("dplayer"),
        video: {
            url: "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd",
            type: "customHlsOrDash",
            customType: {
                "customHlsOrDash": function (video, player) {

                    const src = video.src; // Shaka Player changes video.src to blob URL
                    const shakaPlayer = new shaka.Player(video);
                    if (P2PEngineShaka.isSupported()) {
                        new P2PEngineShaka(shakaPlayer, {
                            logLevel: 'debug',
                        });
                    }
                    const onError = function(error) { console.error("Error code", error.code, "object", error); }
                    shakaPlayer.addEventListener("error", function(event) { onError(event.detail); });
                    shakaPlayer.load(src).catch(onError);
                }
            }
        }
    });
</script>
</body>
</html>

# Plyr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Plyr player with shaka-p2p-engine</title>
    <link rel="stylesheet" href="//cdn.plyr.io/3.5.6/plyr.css">
    <script src="//cdn.plyr.io/3.5.6/plyr.js"></script>
    <script src="//cdn.jsdelivr.net/npm/mux.js@5.6.7/dist/mux.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/cdnbye-shaka@latest"></script>
    <script src="//cdn.jsdelivr.net/npm/shaka-player@2.5.10/dist/shaka-player.compiled.min.js"></script>
    <style>
        #wrapper {
            width: 720px;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <video id="video" controls></video>
</div>
<script>

    var video = document.getElementById("video");
    var player = new Plyr(video);

    shaka.polyfill.installAll();
    var shakaPlayer = new shaka.Player(video);

    if (P2PEngineShaka.isSupported()) {
        new P2PEngineShaka(shakaPlayer, {
            logLevel: 'debug',
        });
    }

    shakaPlayer.load("https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd");

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