Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--<link id="favicon" rel="icon" type="image/x-icon" href="assets/favicon.ico">-->
    <title>Care</title>
    <style>
        body {
            background-color: black;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            box-sizing: border-box;
        }

        #jwplayerdiv {
            position: absolute;
            max-width: 100%;
            max-height: 100%;
            pointer-events: none;
        }

        .video-overlay {
            height: 100%;
            width: 100%;
            position: absolute;
        }

        .controls {
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-content: space-between;
            height: 100%;
            width: 100%;
            padding: 15px;
        }

        .controls__time {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        button {
            background-color: white;
            border: 0;
            padding: 14px;
            margin: 12px;
            font-size: 16px;
            opacity: .6;
            font-weight: bold;
        }

        button:hover {
            opacity: 1;
        }

        .camera {

        }

        .camera--selected {
            opacity: 1;
        }

        #cameraSwitch {

        }
    </style>
</head>
<body>
    <div id="root">
        <div id="jwplayerdiv"></div>

        <!--<div class="video-overlay"></div>-->

        <div class="controls">
            <div id="cameraSwitch"></div>

            <div></div>

            <div class="controls__time">
                <button id="time-minus3s">-3 sec</button>
                <button id="time-live">Live</button>
            </div>
        </div>
    </div>

    <script src="https://content.jwplatform.com/libraries/wr6i4gal.js"></script>

    <script>
        (function() {
            let allCameras = [
                "http://192.168.18.169/r/streams/rec1/15-35-24.mpd",
                "http://192.168.18.169/r/streams/rec1/15-33-15.mpd"
            ]

            let player;

            function loadJwPlayer(videoUrl) {
                let ywPlayerLoadInterval = setInterval(() => {
                    if (typeof jwplayer !== "undefined") {
                        _loadYwPlayer(videoUrl);
                        clearInterval(ywPlayerLoadInterval);
                    }
                }, 200);

                function _loadYwPlayer(videoUrl) {
                    player = jwplayer('jwplayerdiv').setup({
                        file: videoUrl,
                        controls: false,
                        displaytitle: false
                    });
                }
            }

            function setSelectedCamera(i) {
                for(let other of document.getElementById("cameraSwitch").childNodes) {
                    if(other.getAttribute("camera") == i) {
                        other.classList.add("camera--selected");
                    } else {
                        other.classList.remove("camera--selected");
                    }
                }
            }

            allCameras.forEach((c,i) => {
                let btn = document.createElement("button");
                btn.innerHTML = `Camera ${i+1}`;
                btn.classList.add("camera");
                btn.setAttribute("camera", i);

                btn.onclick = () => {
                    loadJwPlayer(c);
                    setSelectedCamera(i);
                };

                document.getElementById("cameraSwitch").append(btn);
            });

            document.getElementById("time-minus3s").addEventListener("click", function(ev) {
                player.seek(player.getPosition() - 3);
            });


            document.getElementById("time-live").addEventListener("click", function(ev) {
                player.seek(-1);
            });

            loadJwPlayer(allCameras[0]);
            setSelectedCamera(0);
        })();
    </script>
</body>
</html>