<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video.js player with EcoCDN P2P WebRTC</title>
<script src="//cdn.jsdelivr.net/npm/ecocdn/vodjs/sigallv1.min.js"></script>
<link href="//vjs.zencdn.net/7.18.1/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.18.1/video.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="//cdn.jsdelivr.net/npm/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/ecocdn/videojs-hlsjs-plugin.min.js"></script>
<style>
.video-js .vjs-big-play-button{
line-height: 70px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -30px;
margin-top: -25px;
}
#video {
max-width: 100% !important;
max-height: 100% !important;
margin-left: auto;
margin-right: auto;
display: block;
}
#video video, #video [data-player]{
height: unset!important;
max-height: 100% !important;
}
</style>
</head>
<body>
<!--video id="video" class="video-js vjs-default-skin" controls autoplay muted></video>-->
<video id="video" width=960 height=540 class="video-js vjs-default-skin" controls autoplay>
<div id="root"></div>
<script>
var video_url = 'https://wowza.peer5.com/live/smil:bbb_abr.smil/playlist.m3u8';
var options = {
autoplay: false,
sources:[
{
src: video_url,
},
],
html5: {
hlsjsConfig: {
//Option for hls.js
}
}
};
function cb () {
var player = videojs("video", options);
player.src({
src: video_url,
type: "application/x-mpegURL",
});
player.hlsQualitySelector();
};
window.Tracker.initVideojs({video_url: video_url, cb: cb});
</script>
</body>
</html>