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/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>
<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>Last updated
Was this helpful?