From 44c909c0957bf751ed26f0ebb66aa96174f908f2 Mon Sep 17 00:00:00 2001
From: xc <double72cheng@gmail.com>
Date: Thu, 15 Apr 2021 13:38:41 +0800
Subject: [PATCH] 新增历史监控时间轴
---
src/main/resources/public/index.html | 428 +++++++++++++++++++++++++++++++++++------------------
1 files changed, 281 insertions(+), 147 deletions(-)
diff --git a/src/main/resources/public/index.html b/src/main/resources/public/index.html
index 4c197fe..bf0bcc2 100755
--- a/src/main/resources/public/index.html
+++ b/src/main/resources/public/index.html
@@ -1,10 +1,11 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
<html>
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jessibuca 1.0</title>
- <meta charset="utf-8" />
+ <meta charset="utf-8"/>
+ <link rel="stylesheet" href="css/index.css">
<style>
.btn {
display: inline-block;
@@ -70,172 +71,305 @@
overflow-y: auto;
padding: 5px;
}
+
+ /* ================ 播放器控制面板样式 start ================ */
+ .controls-container {
+ width: 720px;
+ height: 40px;
+ position: absolute;
+ left: 0px;
+ bottom: -40px;
+ background-color: #000;
+ }
+
+ /* 播放/暂停 */
+ .controls-container .switch {
+ width: 20px;
+ height: 20px;
+ display: block;
+ font-size: 20px;
+ color: #fff;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ }
+ /* 全屏 */
+ .controls-container .expand {
+ width: 20px;
+ height: 20px;
+ display: block;
+ font-size: 20px;
+ color: #fff;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+ /* 进度条 */
+ .controls-container .progress {
+ width: 430px;
+ height: 10px;
+ position: absolute;
+ left: 40px;
+ bottom: 15px;
+ background-color: #555;
+ }
+ .controls-container .progress .bar {
+ /*width: 100%;*/
+ width: 430px;
+ height: 100%;
+ border-radius: 3px;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ top: 0;
+ opacity: 0;
+ z-index: 999;
+ }
+ .controls-container .progress .loaded {
+ width: 60%; /* 视频缓存的进度, 后期可动态变化 */
+ height: 100%;
+ background-color: #999;
+ border-radius: 3px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 2;
+ }
+ /* ================ 播放器控制面板样式 end ================ */
</style>
</head>
<body>
- <div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px">
+<div class="player-wrapper" id="container" style="background-color: #0D0E1B;width:900px;height:500px">
+</div>
+
+
+<div id="progressTime"></div>
+<div class="btn-wrapper" id="playDom">
+ <button class="btn" id="play">播放</button>
+</div>
+<div class="btn-wrapper btn-wrapper2" id="stopDom" style="display: none">
+ <div style="margin-top: 5px">
+ <button class="btn btn-danger" id="stop">结束</button>
</div>
- <div class="btn-wrapper" id="playDom">
- <button class="btn" id="play">播放</button>
- </div>
- <div class="btn-wrapper btn-wrapper2" id="stopDom" style="display: none">
- <div style="margin-top: 5px">
- <button class="btn btn-danger" id="stop">结束</button>
- </div>
- </div>
- <button class="btn" onclick="h5lc.fullscreen=true">全屏</button>
- <div id="logout" class="logs">
- </div>
+</div>
+<button class="btn" onclick="h5lc.fullscreen=true">全屏</button>
+<div id="logout" class="logs">
+</div>
- <script src="./ajax.js"></script>
- <script src="./renderer.js"></script>
- <script>
- onerror = handleErr;
- var txt = "";
- window.onkeydown = function () {
- h5lc.fullscreen = false
+<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
+<script src="./ajax.js"></script>
+<script src="./renderer.js"></script>
+<script type="text/javascript" src="js/jquery.min.js"></script>
+<script type="text/javascript" src="js/jquery.progressTime.js"></script>
+
+
+<script>
+ var hourTimestamp = 3600 * 1000;
+ var dayTimestamp = hourTimestamp * 24;
+ var currentTimer;
+
+ onerror = handleErr;
+ var txt = "";
+ window.onkeydown = function () {
+ h5lc.fullscreen = false
+ }
+ var $play = document.getElementById('play');
+ var $stop = document.getElementById('stop');
+ var $playDom = document.getElementById('playDom');
+ var $stopDom = document.getElementById('stopDom');
+ var container = document.getElementById("container");
+ var isPlaying = false;
+ disabledMouseWheel(container);
+ let stream = queryParam('stream') || 'user1';
+ let decoder = queryParam('decoder') || 'ff';
+ let source = queryParam('source') || 'localhost';
+ var h5lc = new Jessibuca({container, decoder: decoder + ".js", videoBuffer: 0});
+
+
+ $("#progressTime").ProgressTime({
+ container: "progressTime",
+ startTime: new Date(formatDate(new Date(new Date().getTime() - dayTimestamp * 3), "YYYY/MM/DD 00:00:00")),
+ endTime: new Date(formatDate(new Date(), "YYYY/MM/DD 00:00:00")),
+ currentTime: new Date(formatDate(new Date(new Date().getTime() - dayTimestamp * 2), "YYYY/MM/DD 12:00:00")),
+ interval: 300,
+ delay: 2000,
+ isNow: false, // 是否显示右侧回到当前时间
+ toPlay: false, // 渲染是否完成
+ animateFinish: false, // 动画是否完成
+ callback: function (config) {
+ console.log(config);
+ currentTimer=config.time;
+ },
+ animateCallback: function (config) {
+
+ // 假如动画完成之后请求数据需要两秒
+ var timer = setTimeout(function () {
+ progressTime.options.toPlay = true; // 两秒之后再继续走播放条
+ clearTimeout(timer);
+ }, 0);
}
- var $play = document.getElementById('play');
- var $stop = document.getElementById('stop');
- var $playDom = document.getElementById('playDom');
- var $stopDom = document.getElementById('stopDom');
- var container = document.getElementById("container");
- var isPlaying = false;
- disabledMouseWheel(container);
- let stream = queryParam('stream') || 'user1';
- let decoder = queryParam('decoder') || 'ff';
- let source = queryParam('source') || 'localhost';
- var h5lc = new Jessibuca({ container, decoder: decoder + ".js", videoBuffer: 0 });
+ });
+ $(".progressTime-left-b-start").on("click", function () {
+ if(currentTimer){
+ $(this).addClass("stop");
- h5lc.onLoad = function () {
- //this.play("wss://pulls.1234326.cn/live/L01.flv")
- //this.play("ws://localhost:8080/live/test.flv")
- //this.play("ws://" + source + ":8080/live/" + stream)
- //this.play("ws://pull3.afb1188.com/live/" + stream + ".flv")
- //this.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
- }
- h5lc.onPlay = function () {
- isPlaying = true;
- $playDom.style.display = 'none';
- $stopDom.style.display = 'block';
- }
- $play.addEventListener('click', function () {
- if (isPlaying) {
- return;
- }
- isPlaying = true;
- play();
- $playDom.style.display = 'none';
- $stopDom.style.display = 'block';
- }, false);
-
- $stop.addEventListener('click', function () {
- if (!isPlaying) {
- return;
- }
-
- isPlaying = false;
- stop();
-
- $playDom.style.display = 'block';
- $stopDom.style.display = 'none';
- }, false);
-
-
- function play(firstResponseIp) {
- //h5lc.play("ws://" + (firstResponseIp || source) + ":8080/live/" + stream)
- //h5lc.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
- //h5lc.play("ws://localhost:8080/live/" + stream)
- h5lc.play("ws://localhost:8080/live/test.flv")
- // h5lc.play("ws://119.9.118.39:8080/live/user1", canvas)
- // h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas)
- // h5lc.play("ws://localhost:8080/live/test.flv", canvas)
-
- }
- function getFastCdnFromList(ipList) {
- ipList = ipList || [];
- var firstResponseIp = '';
-
- for (var i = 0, len = ipList.length; i < len; i++) {
- var tempIp = ipList[i].name;
- var reqHref = 'http://' + tempIp + '/test';
- var request = _ajax.get(reqHref);
- request.then(function (data) {
- if (!firstResponseIp) {
- firstResponseIp = tempIp;
- // 直接可以播放了。
- play(firstResponseIp);
- }
- })
- }
- }
- function stop() {
- h5lc.close()
- }
-
- function queryParam(name, url) {
- var search = window.location.search;
- var qArr = '';
- var key = {};
-
- if (url) {
- qArr = url.split("?")[1].split("&")
-
- } else {
- if (!window.location.search) {
- return
+ $.ajax({
+ url: ""+"?param=",
+ async: false,//同步方式发送请求，true为异步发送
+ type: "GET",
+ data: {},
+ success: function (result) {
+ alert(result);
}
- qArr = search.substr(1).split("&")
+ });
+
+ }
+ });
+ $(".progressTime-left-b-start stop").on("click", function () {
+ $(this).removeClass("stop");
+ });
+
+ h5lc.onLoad = function () {
+ //this.play("wss://pulls.1234326.cn/live/L01.flv")
+ //this.play("ws://localhost:8080/live/test.flv")
+ //this.play("ws://" + source + ":8080/live/" + stream)
+ //this.play("ws://pull3.afb1188.com/live/" + stream + ".flv")
+ //this.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
+ }
+ h5lc.onPlay = function () {
+ isPlaying = true;
+ $playDom.style.display = 'none';
+ $stopDom.style.display = 'block';
+ }
+ $play.addEventListener('click', function () {
+ if (isPlaying) {
+ return;
+ }
+ isPlaying = true;
+ /* $.get("http://127.0.0.1:8088/monica/test/video", function (data) {
+ h5lc.play(data)
+ }
+ );*/
+ play();
+ $playDom.style.display = 'none';
+ $stopDom.style.display = 'block';
+ }, false);
+
+ $stop.addEventListener('click', function () {
+ if (!isPlaying) {
+ return;
+ }
+
+ isPlaying = false;
+ $.get("http://127.0.0.1:8088/monica/video/stop?param=live/test", function () {
+ alert("视频流已关闭");
+ h5lc.close()
}
+ );
+ //stop();
- for (var i = 0; i < qArr.length; i++) {
+ $playDom.style.display = 'block';
+ $stopDom.style.display = 'none';
+ }, false);
- var firstPos = qArr[i].indexOf('=');
- key[qArr[i].slice(0, firstPos)] = qArr[i].slice(firstPos + 1)
+
+ function play(firstResponseIp) {
+ //h5lc.play("ws://" + (firstResponseIp || source) + ":8080/live/" + stream)
+ //h5lc.play("ws://pull2.afb1188.com/live/" + stream + ".flv")
+ //h5lc.play("ws://localhost:8080/live/" + stream)
+ h5lc.play("ws://172.16.30.113:8082/live/video1.flv")
+ //h5lc.play("ws://localhost:8072/live/test.flv")
+ // h5lc.play("ws://119.9.118.39:8080/live/user1", canvas)
+ // h5lc.play("ws://test.qihaipi.com/gnddragon/test.flv", canvas)
+ // h5lc.play("ws://localhost:8080/live/test.flv", canvas)
+
+ }
+
+ function getFastCdnFromList(ipList) {
+ ipList = ipList || [];
+ var firstResponseIp = '';
+
+ for (var i = 0, len = ipList.length; i < len; i++) {
+ var tempIp = ipList[i].name;
+ var reqHref = 'http://' + tempIp + '/test';
+ var request = _ajax.get(reqHref);
+ request.then(function (data) {
+ if (!firstResponseIp) {
+ firstResponseIp = tempIp;
+ // 直接可以播放了。
+ play(firstResponseIp);
+ }
+ })
+ }
+ }
+
+ function stop() {
+ h5lc.close()
+ }
+
+ function queryParam(name, url) {
+ var search = window.location.search;
+ var qArr = '';
+ var key = {};
+
+ if (url) {
+ qArr = url.split("?")[1].split("&")
+
+ } else {
+ if (!window.location.search) {
+ return
}
+ qArr = search.substr(1).split("&")
+ }
- if (name) {
+ for (var i = 0; i < qArr.length; i++) {
+
+ var firstPos = qArr[i].indexOf('=');
+ key[qArr[i].slice(0, firstPos)] = qArr[i].slice(firstPos + 1)
+ }
+
+ if (name) {
+ return key[name]
+ } else {
+ if (url) {
return key[name]
} else {
- if (url) {
- return key[name]
- } else {
- return key
- }
+ return key
}
}
+ }
- function disabledMouseWheel(ele) {
- if (ele.addEventListener) {
- ele.addEventListener('DOMMouseScroll', scrollFunc, false);
- } //W3C
- ele.onmousewheel = scrollFunc; //IE/Opera/Chrome
- }
+ function disabledMouseWheel(ele) {
+ if (ele.addEventListener) {
+ ele.addEventListener('DOMMouseScroll', scrollFunc, false);
+ } //W3C
+ ele.onmousewheel = scrollFunc; //IE/Opera/Chrome
+ }
- function scrollFunc(evt) {
- evt = evt || window.event;
- if (evt.preventDefault) {
- // Firefox
- evt.preventDefault();
- evt.stopPropagation();
- } else {
- // IE
- evt.cancelBubble = true;
- evt.returnValue = false;
- }
- return false;
+ function scrollFunc(evt) {
+ evt = evt || window.event;
+ if (evt.preventDefault) {
+ // Firefox
+ evt.preventDefault();
+ evt.stopPropagation();
+ } else {
+ // IE
+ evt.cancelBubble = true;
+ evt.returnValue = false;
}
+ return false;
+ }
- function handleErr(msg, url, l) {
- txt = "There was an error on this page.\n\n";
- txt += "Error: " + msg + "\n";
- txt += "URL: " + url + "\n";
- txt += "Line: " + l + "\n\n";
- document.getElementById("logout").innerHTML += txt + "<br>";
- return true;
- }
- </script>
+ function handleErr(msg, url, l) {
+ txt = "There was an error on this page.\n\n";
+ txt += "Error: " + msg + "\n";
+ txt += "URL: " + url + "\n";
+ txt += "Line: " + l + "\n\n";
+ document.getElementById("logout").innerHTML += txt + "<br>";
+ return true;
+ }
+</script>
</body>
--
Gitblit v1.9.1