<div class="player-col c-trs player1 " data-id="1"><div class="color-picker" style="background-color: #FF0101"></div><div id="player1" class="live"></div></div><div class="player-col c-trs player3 active" data-id="3">
<video-js id="player1" class="vjs-big-play-centered vjs-default-skin" controls></video-js></div>
<style>.dvr-controls[data-dvr-controls] .live-info::before, .bar-fill-2{ background-color: #FF0101!important; }</style>
<script src="https://wgstream.sx/players/clappr/clappr.min.js"></script>
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<script src="https://wgstream.sx/panel/js/spectrum/spectrum.js"></script>
<script>
window.onLoad = function(){
	new Clappr.Player({
		source     : "https://89.187.167.247/TVPInfo.stream/playlist.m3u8",
		parent     : "#player1",
		width      : "100%",
		height     : "100%",
		autoPlay   : true,
		stretching : "bestfit",
	});

	var player = videojs("#player3", {
		autoplay   : false,
		preload    : "none",
	});

	player.src({
		src     : 'http://145.239.19.149/6030/mono.m3u8',
		type	: 'application/x-mpegURL',
	});

	$(".color-picker").spectrum({
		color: "#FF0101",
		showInput: true,
		preferredFormat: "hex",
		change: function(color) {
		    $( this ).css("background-color", color.toHexString() );
			$.post( "actions.php", { "color" : color.toHexString(), "a" : "player-color" },function(){

			});
		}
	});
}();
</script>