Medvednica - Sljeme - Webcam - Vidikovac Zagreb stream

index.html

<div>
	<button url="https://cdn-002.whatsupcams.com/hls/hr_sljeme1.m3u8" class="btn btn-info" >Video 1</button>
	<button url="https://cdn-002.whatsupcams.com/hls/hr_sljeme2.m3u8" class="btn btn-info" >Video 2</button>	
	<a class="btn btn-primary">Radio Sljeme</a>
</div>
<video id="video" controls></video>
<audio id="aud"></audio>

medvednica-sljeme-webcam-vidikovac-zagreb-stream.markdown

Medvednica - Sljeme - Webcam - Vidikovac Zagreb stream

A Pen by kpendic on CodePen.

License.

script.js

// our elements
var vid = document.getElementsByTagName('button');
var aud = document.getElementsByTagName('a');
var sljeme = document.getElementById('aud');

if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('https://cdn-002.whatsupcams.com/hls/hr_sljeme2.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  	});
 }
 // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
 // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element throught the `src` property.
 // This is using the built-in support of the plain video element, without using hls.js.
  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8';
    video.addEventListener('canplay',function() {
      video.play();
    });
  }

for(var i = 0; i < vid.length; i++){
	vid[i].onclick = function(){
		if (video.canPlayType('application/vnd.apple.mpegurl') ){
			video.src = this.getAttribute('url');
			video.addEventListener('canplay',function() {
				video.play();
			});
		} else {
			hls.loadSource(this.getAttribute('url'));
			hls.attachMedia(video);
			hls.on(Hls.Events.MANIFEST_PARSED,function() {
			  video.play();
			});
		}
	}
}

aud[0].onclick = function(){
	sljeme.setAttribute('src', 'https://20073.live.streamtheworld.com/SLJEME.mp3');
	sljeme.play();
}

scripts

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://rawgit.com/mkdizajn/CssNamedColorsToRGBandJSON/bfc7a348da2125507ec08ad65eebc80d639d0b3f/colors.js"></script>

style.css

body{ margin:0; padding:0; overflow: hidden; }
video{ width: 99vw; height: 99vh; }
div{
	position: absolute;
	top: 5%; left:50%;
	transform: translate(-50%, -50%); z-index: 5000;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />