<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Clappr player with EcoCDN P2P WebRTC</title>
<script src="//cdn.jsdelivr.net/npm/ecocdn/vodjs/sigallv1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/clappr-pip.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lib/clappr-playback-rate-plugin.min.js"></script>
<style type="text/css">
@media (max-width: 849px){
.page-video .preview-box #preview audio, .page-video .preview-box #preview canvas, .page-video .preview-box #preview progress, .page-video .preview-box #preview video, .page-video .preview-box #preview [data-player] {
width: 100% !important;
height: 210px!important;
display: block;
margin: 0 auto;
}
}
</style>
</head>
<body>
<div id="player"></div>
<script>
var video_url = "https://wowza.peer5.com/live/smil:bbb_abr.smil/playlist.m3u8";
var player = new Clappr.Player({
parentId: "#player",
source: video_url,
mute: true,
plugins: [ClapprPip.PipButton, ClapprPip.PipPlugin, PlaybackRatePlugin],
playbackRateConfig: {
defaultValue: 1,
options: [
{value: 5, label: '5x'},
{value: 3, label: '3x'},
{value: 2, label: '2x'},
{value: 1, label: '1x'},
{value: 0.5, label: '0.5x'},
{value: 0.25, label: '0.25x'},
],
// rateSuffix: 'x',
},
});
window.Tracker.initClappr({player: player, video_url: video_url});
</script>
</body>
</html>