Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement