VideoJS Player

Example:

<html>
<head>
    <title>Videojs with ECODN P2P WEBRTC</title>
    <link href="//vjs.zencdn.net/7.12.4/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.12.4/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <!-- videojs-hls-quality-selector -->
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-quality-levels.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/videojs-hls-quality-selector.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/ecocdn/videojs-hlsjs-plugin.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/ecocdn/hlsjs-ecocdn.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://content.jwplatform.com/manifests/vM7nH0Kl.m3u8',
            },
        ],
        html5: {
            hlsjsConfig: {
                maxBufferLength: 10,
                liveSyncDurationCount: 10,
            }
        }
    };
    videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
        if (P2PEngine.isSupported()) {
            var engine = new P2PEngine(hlsjsInstance, {
                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>
PreviousHTML5 PlayersNextEnvironment Configuration

Last updated

Was this helpful?