<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Video.js library -->
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
<!-- videojs-contrib-hls plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.js"></script>
</head>
<title>Fishtank LIVE</title>
</head>
<body>
<h1>Fishtank Season 2</h1>
<label for="streamSelect">Select Room:</label>
<select id="streamSelect" onchange="changeStream()">
<option value="Hallway Downstairs">Hallway Downstairs</option>
<option value="Dog House">Dog House</option>
<option value="Kitchen">Kitchen</option>
<option value="Bar">Bar</option>
<option value="Lounge">Lounge</option>
<option value="Living Room">Living Room</option>
<option value="Hallway Upstairs">Hallway Upstairs</option>
<option value="Bedroom 1">Bedroom 1</option>
<option value="Bedroom 2">Bedroom 2</option>
<option value="Bedroom 3">Bedroom 3</option>
<option value="The Bunk">The Bunk</option>
<option value="The Attic">The Attic</option>
</select>
<button onclick="previousStream()">Previous</button>
<button onclick="nextStream()">Next</button>
<br><br>
<video id="streamPlayer" class="video-js vjs-default-skin" controls width="640" height="360">
<source src="" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>
<script>
var streamLinks = {
"Hallway Downstairs": "https://eu03.flowstreams.cx/fishtank-hallway-downstairs/tracks-v1a1/mono.m3u8",
"Dog House": "https://eu03.flowstreams.cx/fishtank-dog-house/tracks-v1a1/mono.m3u8",
"Kitchen": "https://eu03.flowstreams.cx/fishtank-kitchen/tracks-v1a1/mono.m3u8",
"Bar": "https://eu03.flowstreams.cx/fishtank-bar/tracks-v1a1/mono.m3u8",
"Lounge": "https://eu03.flowstreams.cx/fishtank-lounge/tracks-v1a1/mono.m3u8",
"Living Room": "https://eu03.flowstreams.cx/fishtank-living-room/tracks-v1a1/mono.m3u8",
"Hallway Upstairs": "https://eu03.flowstreams.cx/fishtank-hallway-upstairs/tracks-v1a1/mono.m3u8",
"Bedroom 1": "https://eu03.flowstreams.cx/fishtank-bedroom-1/tracks-v1a1/mono.m3u8",
"Bedroom 2": "https://eu03.flowstreams.cx/fishtank-bedroom-2/tracks-v1a1/mono.m3u8",
"Bedroom 3": "https://eu03.flowstreams.cx/fishtank-bedroom-3/tracks-v1a1/mono.m3u8",
"The Bunk": "https://eu03.flowstreams.cx/fishtank-the-bunk/tracks-v1a1/mono.m3u8",
"The Attic": "https://eu03.flowstreams.cx/fishtank-attic/tracks-v1a1/mono.m3u8"
};
var currentStreamIndex = 0;
var player = videojs("streamPlayer");
// Register the videojs-contrib-hls plugin
player.hls();
function changeStream() {
var select = document.getElementById("streamSelect");
var selectedStream = select.value;
player.src({
src: streamLinks[selectedStream],
type: "application/x-mpegURL"
});
player.play();
}
function nextStream() {
var select = document.getElementById("streamSelect");
var streamOptions = select.options;
currentStreamIndex = (currentStreamIndex + 1) % streamOptions.length;
select.selectedIndex = currentStreamIndex;
changeStream();
}
function previousStream() {
var select = document.getElementById("streamSelect");
var streamOptions = select.options;
currentStreamIndex = (currentStreamIndex - 1 + streamOptions.length) % streamOptions.length;
select.selectedIndex = currentStreamIndex;
changeStream();
}
</script>
</body>
</html>